php - 使用 ajax 和 GET 请求实现搜索而无需重新加载(例如 Amazon.com)

Question

AJAX 新手。有点不确定如何在不重新加载整个页面的情况下提交 GET 请求。

1. 用户访问 www.example.com/products/
2. 类型“园艺工具”
3. 结果会随着 www.example.com/products/results?search=Gardening+Tools 的网址更改而内联加载，无需重新加载页面即可完成。
4. 任何用户都可以使用网址 www.example.com/products/results?search=Gardening+Tools 并获得相同的结果。

注意:第 4 点很重要。它一定不是某种简单的方法，只是将参数添加到 URL 中，使其看起来像这样。有些用户可能想要添加书签(这就是我首先使用 GET 请求的原因)。

<小时/>

这是我的代码的基本表示，适用于 POST:

表单:使用 POST 进行基本提交，我希望它是 GET。

<form id="submit" action="" method="POST">
   <input type="text" name="search"/>
   <button type="submit"></button>
</form>

jQuery:使用 .ajax() 我们向 /products/results.php 发送 POST 请求

$('form#submit').submit(function (e) {
e.preventDefault();
$.ajax({
        type: 'POST',
        url: 'results.php',
        data: "search="+encodeURIComponent($('input[name="search"]').val()),
        dataType: 'json',
        success: function(data) {
            //inject some html into page
        }
    });
 }

results.php:(也只是为了确保我在这里免受 SQL 注入(inject)的保护？魔术引号已关闭)。

$query = $_POST['search'];
$query = mysql_real_escape_string($query);
$query = htmlspecialchars($query);
//you get the point: straight forward db connect, query and return as json

<小时/>

所以我尝试将所有 POST 更改为 GET 但没有成功。有什么概念我不明白吗？

我认为这可能与$('form#submit').submit(function (e)和preventDefault()函数有关。但是需要preventDefault来停止页面重新加载.

Answer 1

<input type="text" name="search" id="search"/>

并且

$('form#submit').submit(function (e) {
e.preventDefault();
var search = $('#search').val();
$.ajax({
        type: 'POST',
        url: 'results.php',
        data: {search:search},
        dataType: 'json',
        success: function(data) {
            //inject some html into page
        }
    });
 }