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

Posted 2023-02-24

【中文标题】如何使用多个查询字符串加载内容而不刷新

【英文标题】：How to load content without refresh with multiple querystring

【发布时间】：2012-01-25 11:03:42

【问题描述】：

我想使用菜单中的多个查询字符串将动态内容加载到特定的 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】：

说明

您必须为给定的子字符串创建另一个以 json 格式返回数据的 php 页面。您的子字符串是动态的，因此您必须从另一个元素获取子字符串。我建议<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);
);

更多信息

文档

jQuery.ajax() jQuery.post() jQuery.get() jQuery.load() jQuery.html() jQuery.val() jQuery.next()

教程

jQuery, Ajax, Json and Php Use jQuery and PHP to build an Ajax-driven Web page

【讨论】：

谢谢dknaack。你让我走上了正轨。问题，在url:"yourNewPage.php?category=1&tag=2" 上如何使其具有动态性？假设我点击index.php?category=2&tag=2&location=3。

很高兴为您提供帮助，祝您有美好的一天！

【参考方案2】：

使用 jQueries 许多 AJAX 函数之一，例如：

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

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

【参考方案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。

【讨论】：

hmmmm 链接没有解释...先生，您要求被否决。

我认为他需要的一切都在那个链接后面，但是没关系。我认为这是一个“我什至从哪里开始”的问题。

*** 上的答案是独立的。链接只要附有解释、示例代码和/或链接内容的引用就可以了。这将是一个更好的评论。

【参考方案4】：

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

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

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