Как сделать переход по страницам сайта без перезагрузки всей страницы? Подскажите, как это сделать или дайте какой-нибудь пример. А еще, кто знает хороший видеокурс или книжку по нему (Ajax)? Заранее благодарен.
2 ответа
var getRequest = {
send: function(url, idHtml,data) {
if(!url)
return false;
jQuery.ajax({
url: url,
data: data, //Это Массив с элементами для передачи
type: "POST",
success: function (callback) {
jQuery("#" + idHtml).html(callback);
},
error: function () {
alert("Error ger response from server");
}
});
}
}
Чтобы не пришлось особо ничего переделывать в текущем варианте добавляем :
jQuery("a").click(function(event) {
getRequest.send(event.target.attr.href, "#MyBigAjaxElement", NULL);
return false;
});
где-то в коде.
<a href="link.php">Идем сюда</a>
<div id="MyBigAjaxElement"></div> //Сюда попадет то, что мы получим при клике по ссылке выше.
P.S. Сорри, писал код практически на коленке...в пьяном состоянии в маршрутке с телефона. Мог где-нибудь очепятаться :)
=======================Специально для Бориса. Суть того, что ты написал мне так и не ясна :)
"а если у тебя 500 фоток и ты хочешь сделать как топикстартер. то биш пусть на странице по 20 фоток и полуится 25 страниц фоток" <--- это я понял. Хорошо, я могу кол-во фоток послать и в Json-е => знаю размерность "топикстартера". => если мне нужно подгружать по 20 фоток, то:
var ph_arr = [/Массив URL фотками/];
var htm = "";
for (var i = start_photo_elem; i < (start_photo_elem + 20); i++ ) {
if (ph_arr.length == i) break;
htm += <img src ='ph_arr[i] + "' />"
}
jQuery("#photo-div-1").append(htm);
Где:
- ph_arr - массив со ссылками на фото.
- start_photo_elem - элемент, с которого мне начинать отсчитывать 20 картинок.
- htm - контейнер с получившимся контентом для моего "photo-div-1"
Ну и получится то, что ты будешь подгружать картинки только тогда, когда они действительно будут нужны и при этом без перезагрузки основного контента.
-
ну ладно. в первом скрипте ты передаешь что-то пост запросом. а потом var ph_arr откуда? я и написал что можно сделать RESTFul api для совего сайта. а не о том как вставить фотки и т.д. а фотки были примером.– sysashi8 дек 2011 в 12:44
-
мы не поняли друг друга) ты написал ему скрипт с POST запросом, а я описал более глобально. как то так вобщем))– sysashi8 дек 2011 в 12:48
json. на сервере делайте отдачу данных в json формате(ну или в xml но это как то не камильфо) например у вас есть галерея и при запросе /gallery.json вы будете отдавать массив с названиями, описанием и путями к фотографиям с лимитом например в 10 штук.
а на клиенте подружайте фотографии через тотже $.get(); создайте объект Photo с параметрами типа описания, пути и тп. заполните массив из объектов(данные из $get ) и вставляйте их в DOM.
-
эмм... смысл подгружать фотографии c помощью JS? Я могу создать элемент IMG с указанием src своей фтографии :) jQuery("#photo-div-1").append("<img src='" .link_to_img. "' />"); Собственно, увидим результат :) 8 дек 2011 в 10:41
-
эм а если у тебя 500 фоток и ты хочешь сделать как топикстартер. то биш пусть на странице по 20 фоток и полуится 25 страниц фоток, и нужно что бы переход по страницам не перезагружал "всю страницу" в браузере. то ты 500 фоток через jQuery("#photo-div-1").append("<img src='" .link_to_img. "' />"); будешь делать?– sysashi8 дек 2011 в 11:27