2

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

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

注意：要点 4 很重要。只是将参数添加到 URL 以使其看起来像这样，这一定不是一些 hacky 方式。一些用户可能想要添加书签（除此之外，我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

因此，我尝试将所有POSTs更改为GETs ，但没有成功。有没有我不理解的概念？

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

4

2 回答 2

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
        }
    });
 }
于 2013-04-16T05:01:35.690 回答
-1

让我举一个非常简单的例子。

形式： - 此处不需要使用 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();
}

结果.php：

$query = $_GET['q'];
//rest follow your code
于 2013-04-16T04:16:53.570 回答