使用ajax和GET請求實現搜索而無需重新加載（例如Amazon.com）

Question

AJAX的新手。 有點不確定如何在不重新加載整個頁面的情況下提交GET請求。

1. 用戶訪問www.example.com/products/
2. 類型“園藝工具”
3. 結果加載與URL一致，對www.example.com/products/results?search=Gardening+Tools更改無需重新加載頁面即可完成。
4. 任何用戶都可以使用URL 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()我們將POST請求發送到/products/results.php

$('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注入的影響？魔術引號已關閉）。

$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（）函數有關。但是，stopDefault是停止頁面重新加載所必需的。

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
        }
    });
 }

Answer 2

讓我舉一個非常簡單的例子。

格式： -使用AJAX不需要操作和方法

 <form id="form1">
       <input type="text" class='search' name="search"/>
       <button type="button" onclick="funcAjax()">Load Results</button>
 </form>

jQuery： -在這里我們將定義函數“ funcAjax（）”。

xmlhttp.responseText是您的php頁面返回的值

function funcAjax()
{
    //value to be searched
    var searchVal= $('.search').val();
    var xmlhttp;
    if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else{
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
             //xmlhttp.responseText is the value returned from your php page
        }
    }

    xmlhttp.open("GET","results.php?q="+searchVal,true);
    xmlhttp.send();
}

results.php：

$query = $_GET['q'];
//rest follow your code