Как обновить страницу с помощью jQuery Ajax? - PullRequest
Новая
       17

Как обновить страницу с помощью jQuery Ajax?

1 голос
/ 08 января 2010

Я хочу обновить полную страницу с помощью ajax, после нажатия на исходную ссылку сайта.

Пример:

Мы открыли сайт www.love.com, на котором есть ссылка на www.love.com/somepage.html

После того, как мы нажмем на эту ссылку, вся страница должна быть обновлена ​​с помощью ajax (заменена активная страница somepage.html)

И при замене страницы должен быть эффект fadeIn / Out.

Как?

может быть, какой-нибудь плагин может сделать это, любая ссылка?

Ответы [ 6 ]

4 голосов
/ 08 января 2010

Ну, запрос на полную страницу противоречит цели AJAX,

, но если вы настаиваете :), вы можете использовать огромный div в качестве заполнителя вашей страницы и использовать jQuery Load / Ajax

div будет выглядеть следующим образом 

<div id="yourhugediv"></div>

и функция, которую вы можете использовать 

function changeUrl(href)
{
   $('#yourhugediv').load(href);
   href = (href == "") ? "/" : href;
   uri = window.location.href.split("#/");
   window.location.href = uri[0] + "#/" + href;
}

, либо вручную добавьте функцию к вашей ссылке 

<a href="#" onclick="changeUrl('http://love.com/somepage.html')">to load</>

или используйте селектор jQuery для итерации каждого якоря 

$('a').click(function()
{
    changeUrl(a.attr('href'));
});
$('a').attr('href','#');
2 голосов
/ 08 января 2010

Используйте FAJAX (Поддельный AJAX). Это даст вам ту «крутость», которую вы ищете. Использование этих метатегов на ваших страницах приведет к полному обновлению страницы с эффектами постепенного появления и исчезновения. 

<META http-equiv="Page-Enter" content="blendTrans(Duration=0.2)">
<META http-equiv="Page-Exit" content="blendTrans(Duration=0.2)">

Метатеги работают только в IE, но есть способы получить аналогичные результаты в других браузерах, используя JavaScript. 

<html>
<head>
    <title>Page Title</title>
    <META http-equiv="Page-Enter" content="blendTrans(Duration=0.2)">
    <META http-equiv="Page-Exit" content="blendTrans(Duration=0.2)">
    <script type="text/javascript">
        function fadeInit() {
            document.body.style.opacity=0.2; // initialise
        }

        function fadeIn() {
            var bodyStyle=document.body.style;
            if ( bodyStyle.opacity < 1) {
                bodyStyle.opacity=((bodyStyle.opacity*10)+1)/10; //Add 0.1
                setTimeout('fadeIn();',100)
            }
        }
    </script>
</head>
<body onload="fadeInit();fadeIn();">

</body>
</html>
2 голосов
/ 08 января 2010

Звучит так, будто вы пытаетесь использовать jQuery, потому что кто-то сказал вам, что вы должны использовать jQuery - тег ссылки выполняет эту работу сам по себе без какого-либо сценария

хорошо - мы должны делать то, что нам говорят наши подруги ...

Полагаю, вы могли бы сделать что-то вроде этого:

$("body").load("next_page.html");

или

$("html").load("next_page.html"); (будет ли это вообще работать ??)

1 голос
/ 08 января 2010

Поскольку другая страница находится в том же домене, вы можете очистить другую страницу, чтобы получить интересующие вас данные. Вы можете даже заменить весь тег body текущей страницы содержимым тега body в другой стр.

Процесс будет выглядеть примерно так: пользователь выполняет какое-то действие на текущей странице, чтобы вызвать нужное действие, JavaScript делает AJAX-запрос на получение somepage.html и сохраняет результат в строке, JavaScript делает эквивалент innerHTML (или jQuery.html ( )) заменить содержимое текущей страницы (или div или что-либо еще) тем, что было извлечено из somepage.html, и добавить специальный эффект.

Теоретически это позволит вам полностью заменить содержимое текущей страницы тем, что было получено из somepage.html.

1 голос
/ 08 января 2010

Просто создайте ссылку, которая указывает там: 

<a href="http://www.love.com/somepage.html">link text</a>

ps: я немного растерялся, хотя ... у вас уже есть ссылка на эту страницу, которая вызывает новый запрос (полное обновление страницы) а зачем нужен AJAX мне интересно ...

0 голосов
/ 30 сентября 2010

Я знаю, что это старый пост, но я думаю, что то, что вы ищете, решается с помощью плагина BBQ jQuery: http://benalman.com/projects/jquery-bbq-plugin/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...