PHP中的ajax jquery搜索表单

这是我的表格：

<form id="submitsearch" action="Classes/system/main/searchresult.php" method="POST">
Search by <span style="font-size:15px;">(developer, specialization, profession,major)</span>
    <input type="text" name="searchbox" id="searchbox" />
    in
    <select style="text-align:center;" name="countrysearch" id="countrylist">
        <option selected="selected" value="0">None</option>
        <option value="1">USA</option>
    </select>
<input style="margin-left:25px;" id="submitSearch" type="submit" value="Search"/>
</form>

为什么不起作用？php文件正常返回正确的结果

但我希望使用ajax将其加载到另一个id为“pagePanel”的div中，而无需重新加载

有什么帮助吗？我不熟悉Ajax

编辑：

这对我来说是可行的

---

谢谢您的帮助。

如果您有类型为“提交”的输入，它会，猜猜看：），提交表单，然后重新加载页面。把它变成：

<input style="margin-left:25px;" id="submitSearch" type="button" value="Search"/>

---

如果您想在表单提交中使用ajax，您需要取消它

$("#submitSearch").click(function(event){
    $.ajax({type:'POST', url: 'Classes/requests/search.php', data:$('#submitsearch').serialize(), cache: false, success: function(response) {
        $('#pagePanel').html(response);
    });  
    event.preventDefault();//prevents submitting of the form
}

---

首先，您需要停止默认表单提交。在提交处理程序中返回

false

，以停止默认设置。只需使用元素的ID，而无需使用find（）将数据插入。您试图查找的元素没有出现在html中，尽管它出现在代码建议的表单中

$("#submitSearch").click(function(){

    $.ajax({type:'POST',
           url: 'Classes/requests/search.php', 
           data:$('#submitsearch').serialize(),
           cache: false, 
           success: function(response) {
                 $('#pagePanel').html(response);
            }
    })

    return false;

});  

---

按下

submit

按钮后，默认行为是提交表单，并转到您提供给表单的操作URL。现在，你想阻止这种行为。这意味着您必须查看表单的

onsubmit

事件，并阻止实际提交。jQuery有一个方法来实现这一点

在您的情况下，只需添加以下代码：

$(document).ready(function() {
    $("#submitsearch").on("submit", function (e) {
        e.preventDefault();
    });        
});

并且是一个JSFIDLE来演示它

---

显然，您可以对提交按钮执行相同的操作，只需将

e

变量作为参数添加到

单击事件中，并使用
e.preventDefault（）
取消实际提交（但您仍然可以完美地执行AJAX请求）。
首先，您缺少一些右括号和花括号。确保在浏览器中运行开发工具，以检查控制台中是否存在类似的错误。我通常不使用$.ajax…我通常使用$.post，但使用到目前为止您所拥有的，我将重写到更接近以下内容：

$("#submitsearch").submit(function(){

    var submitData = $(this).serialize();    
    $.ajax(
        {
            type:'POST', 
            url: 'Classes/requests/search.php', 
            data: submitData, 
            cache: false, 
            success: function(response) {
                $('#pagePanel').html(response);
            }
        }
    );
    return false;
});​

您不必将加载的HTML发送回页面，只需以一组JSON对象的形式发送结果，然后根据结果动态创建HTML，这意味着将更少的数据发送回浏览器，这将更快、更高效。
到底是什么不起作用？您在错误控制台中遇到了哪些错误？不要将表单#submitsearch和按钮标识为#submitsearch。。。可能会出现混乱。我没注意，只是换了一下，试了你的方法，但没用。让我们把它分解一下：撇开这些建议不谈，这个东西一开始能用吗？在将类型改为button之后，它现在能用了，另一个问题是路径：P我没有更改路径，而是保留了旧路径。如果您从
提交
更改为
按钮
，浏览器将无法理解该按钮与表单其余部分的连接。举个简单的例子，这意味着您不能按Enter键来运行搜索。
$("#submitSearch").click(function(){

    $.ajax({type:'POST',
           url: 'Classes/requests/search.php', 
           data:$('#submitsearch').serialize(),
           cache: false, 
           success: function(response) {
                 $('#pagePanel').html(response);
            }
    })

    return false;

});  

$(document).ready(function() {
    $("#submitsearch").on("submit", function (e) {
        e.preventDefault();
    });        
});

$("#submitsearch").submit(function(){

    var submitData = $(this).serialize();    
    $.ajax(
        {
            type:'POST', 
            url: 'Classes/requests/search.php', 
            data: submitData, 
            cache: false, 
            success: function(response) {
                $('#pagePanel').html(response);
            }
        }
    );
    return false;
});​