描述

Question

我想从菜单中使用多个查询字符串将动态内容加载到特定的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进程＆amp;在不刷新页面的情况下以特定div名称显示结果。

让我知道

Answer 1

描述

您必须创建另一个php页面，该页面以json格式返回给定子字符串的数据。您的子字符串是动态的，因此您必须从另一个元素获取子字符串。我建议<input type="hidden" value="YourQueryString"/>，它很简单。您可以将元素放在链接旁边，然后使用jQuery.val()获取值。
然后在index.php中使用jQuery.ajax() / jQuery.get()或jQuery.post()来获取该页面/脚本中的数据。（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);
      }
    });
});

更新

或者，您的php页面可以返回查询字符串的html（简单页面）。这比在jQuery Ajax Callback中构建html更容易。如果这样做，你可以这样做

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

更多信息

<强>文档

<强>教程

Answer 2

使用jQueries中的一个AJAX函数，例如：

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

检查： http://api.jquery.com/jQuery.post/

Answer 3

您的PHP脚本应该返回要加载到div中的HTML; 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调用，并使用HTML响应填充目标div。有关此主题的更多信息，请参阅here。

Answer 4

您可以使用jQuery.load()（Javascript - 客户端）：

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

查看http://api.jquery.com/load/了解更多信息。

如何使用多个查询字符串加载内容而不刷新

4 个答案:

描述

样品

更新

更多信息