Как загрузить контент без обновления с помощью нескольких запросов

Я хочу загрузить динамический контент в определенное имя div с несколькими запросами из меню.

Пример ссылки динамического меню

index.php?tag=2
index.php?category=1&tag=2
index.php?category=2&tag=2&location=3

Пример процесса запроса в PHP для ссылки index.php?category=1&tag=2

$tag = intval($_GET['tag']);
$cat = intval($_GET['category']);

if(isset($tag) && isset($cat)) {
$select = $db->query("SELECT * FROM table WHERE cat=".$cat." AND tag=".$tag."");
... // fetch results
}

Вопрос. С помощью jQuery, как указать пользователю щелкнуть ссылку, отправьте обратный вызов в процесс PHP и покажите результаты в конкретном имени div без обновления страницы.

Сообщите мне

Ответ 1

Описание

Вам нужно создать другую php-страницу, которая возвращает данные в формате json для данной подстроки. Ваша подстрока динамическая, поэтому вам нужно получить подстроку из другого элемента. Я предлагаю <input type="hidden" value="YourQueryString"/>, это просто. Вы можете поместить элемент рядом со своей ссылкой и получить значение с помощью jQuery.val().
Затем вы используете jQuery.ajax()/jQuery.get() или jQuery.post() в вашем index.php для получения данных с этой страницы /script. (jQuery.get() и jQuery.post() использует jQuery.ajax() внутренне)
В методе обратного вызова jQuery ajax вы берете данные и строите html. После этого вы можете использовать jQuery.html(), чтобы установить данные в ваш div.

Пример

html/php

<a class="AnyClassName">Click me</a>
<input type="hidden" value="category=1&tag=2"/>

JQuery

$(".AnyClassName").click(function() {
    // lets get the query string
    var queryString = $(this).next().val();
    $.ajax({
      url: "yourNewPage.php?" + queryString,
      context: document.body,
      success: function(data){
        var generatedHtml = "..." // build your html from the data object
        $("#IdOfYourDiv").html(generatedHtml);
      }
    });
});

Update

В качестве альтернативы ваша страница php может возвращать html (простую страницу) для вашей строки запроса. Это проще, чем строить html в jQuery Ajax Callback. Если это будет сделано, вы можете сделать это

$(".AnyClassName").click(function() {
    // lets get the query string
    var queryString = $(this).next().val();
    $('#IdOfYourDiv').load("yourNewPage.php?" + queryString);
});

Дополнительная информация

Documentation

Учебники

Ответ 2

Используйте одну из jQueries для многих функций AJAX, например:

  $.post("ajax.php", "category=1&tag=2",
   function(data) {
     alert("Data Loaded: " + data);
   });

Check: http://api.jquery.com/jQuery.post/

Ответ 3

Ваш PHP script должен вернуть HTML, который вы хотите загрузить в div; JS выглядит так:

$('#your_menu').on('click', 'a', function(e) {
  var $this = $(this),
      url = $this.href;

  $.ajax({
    url: url,
    success: function(html) {
      $('#div_to_update').html(html);
    }
  });
});

Он получает URL-адрес из ссылки, которую вы нажали в меню, передает URL-адрес вызову Ajax и заполняет целевой div с помощью ответа HTML. См. здесь для получения дополнительной информации по этой теме.

Ответ 4

Вы можете использовать jQuery.load() для этого (Javascript - клиентская сторона):

$('#id_of_the_div').load('index.php?category=1&tag=2');

Подробнее см. http://api.jquery.com/load/.