PHP 中的 ajax jquery 搜索表单 - ajax jquery search form in PHP

这是我的形式：

<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>

这是 Ajax jquery 代码：

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

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

但是我希望它加载到另一个 id 为"pagePanel"的div 中，而无需使用 ajax 重新加载。

有什么帮助吗？我是阿贾克斯的新手。

编辑：

    $("#submitbutton").click(function(){
    $.ajax({type:'POST', url: 'Classes/system/main/searchresult.php', data:$('#submitsearch').serialize(), cache: false, success: function(response) {
        $('#pagePanel').html(response);
}})});

这和我一起解决了。

感谢您的帮助。

如果您有类型 submit 的输入，它会，猜猜:)什么，提交表单，因此重新加载页面。将其转换为：

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

然后确保你的 html 中确实有一个 pagePanel 元素。

现在有几个建议：

不要将您的表单#submitsearch和按钮标识为#submitSearch...可能会出现混淆
您可以使用 AJAX 的 .load() 而不是 .ajax() 直接在 DIV 中获取结果：

所以：

$("#pagePanel").load('Classes/requests/search.php', {$('#submitsearch').serialize()});

如果你想

在表单提交中使用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（）将数据插入其中。您尝试查找的 elemnt 不会出现在您的 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有一个preventDefault()方法来做到这一点。

在您的情况下，您所要做的就是添加以下代码：

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

这里有一个jsFiddle来演示它。

显然，您可以对提交按钮执行相同的操作，只需将e变量作为参数添加到click事件并使用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;
});

您可以以一组JSON对象的形式发送结果，然后根据结果动态创建HTML，而不是将HTML负载发送回页面，这意味着发送回浏览器的数据要少得多，更快，更高效。