Я хочу обновить всю страницу с помощью ajax после нажатия на какую-либо начальную ссылку на сайт.
Пример:
Мы открыли сайт www.love.com, на нем есть ссылка на www.love.com/somepage.html
После того, как мы нажмем на эту ссылку, полная страница должна быть обновлена с помощью ajax (заменена активная страница на somepage.html)
И должен быть какой-то эффект постепенного появления/исчезновения при замене страницы.
Как?
может быть, какой-то плагин может это сделать, любая ссылка?
Ну, запрос на всю страницу противоречит цели 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','#');
Похоже, вы пытаетесь использовать jQuery, потому что кто-то сказал вам, что вы должны использовать jQuery - тег ссылки делает эту работу сам по себе без какого-либо скрипта
хорошо - мы должны делать то, что говорят нам наши подруги...
Я полагаю, вы могли бы сделать что-то вроде этого:
$("body").load("next_page.html");
or
$("html").load("next_page.html"); (это вообще сработает??)
Используйте 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>
Просто сделайте ссылку, которая указывает туда:
<a href="http://www.love.com/somepage.html">link text</a>
ps: я немного запутался, хотя... у вас уже есть ссылка на эту страницу, которая вызывает новый запрос (полное обновление страницы), зачем нужен AJAX, интересно...
blink? Вот, пожалуйста...)
- person Felix Kling; 08.01.2010
Поскольку другая страница находится в том же домене, вы можете очистить другую страницу, чтобы получить интересующие вас данные. Вы даже можете заменить весь тег body текущей страницы содержимым тега body на другой странице.
Процесс будет выглядеть примерно так: пользователь выполняет какое-то действие на текущей странице, чтобы вызвать желаемое действие, JavaScript делает запрос AJAX для извлечения somepage.html и сохраняет результат в строке, JavaScript выполняет эквивалент innerHTML (или jQuery.html()) для замените содержимое текущей страницы (или div или что-то еще) тем, что было получено из somepage.html, и добавьте специальный эффект.
Теоретически это позволит вам полностью заменить содержимое текущей страницы тем, что было получено из somepage.html.
Я знаю, что это старый пост, но я думаю, что то, что вы ищете, решается с помощью плагина BBQ jQuery: http://benalman.com/projects/jquery-bbq-plugin/
