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

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进程并以特定的div名称显示结果而不刷新页面.

让我知道

Answer 1

描述

1. 您必须创建另一个php页面,该页面以json格式返回给定子字符串的数据.您的子字符串是动态的,因此您必须从另一个元素获取子字符串.我建议一个<input type="hidden" value="YourQueryString"/>,它很简单.您可以将元素放在链接旁边并使用该值jQuery.val().

2. 然后使用jQuery.ajax()/ jQuery.get()或jQuery.post()在index.php中从该页面/脚本中获取数据.(jQuery.get()并在内部jQuery.post()使用jQuery.ajax())

3. 在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(简单页面).这比构建html更容易jQuery Ajax Callback.如果这样做,你可以这样做

$(".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和Php
• 使用jQuery和PHP构建一个Ajax驱动的Web页面