0

Как сделать переход по страницам сайта без перезагрузки всей страницы? Подскажите, как это сделать или дайте какой-нибудь пример. А еще, кто знает хороший видеокурс или книжку по нему (Ajax)? Заранее благодарен.

2 ответа 2

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"

Ну и получится то, что ты будешь подгружать картинки только тогда, когда они действительно будут нужны и при этом без перезагрузки основного контента.

2
  • ну ладно. в первом скрипте ты передаешь что-то пост запросом. а потом var ph_arr откуда? я и написал что можно сделать RESTFul api для совего сайта. а не о том как вставить фотки и т.д. а фотки были примером.
    – sysashi
    8 дек 2011 в 12:44
  • мы не поняли друг друга) ты написал ему скрипт с POST запросом, а я описал более глобально. как то так вобщем))
    – sysashi
    8 дек 2011 в 12:48
0

json. на сервере делайте отдачу данных в json формате(ну или в xml но это как то не камильфо) например у вас есть галерея и при запросе /gallery.json вы будете отдавать массив с названиями, описанием и путями к фотографиям с лимитом например в 10 штук.

а на клиенте подружайте фотографии через тотже $.get(); создайте объект Photo с параметрами типа описания, пути и тп. заполните массив из объектов(данные из $get ) и вставляйте их в DOM.

2
  • эмм... смысл подгружать фотографии 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. "' />"); будешь делать?
    – sysashi
    8 дек 2011 в 11:27

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.