Question

这是我的表格：

<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重新加载。

有任何帮助吗？我是Ajax的新手。

编辑：

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

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

}})});

这与我一起解决了。

感谢您的帮助。

Answer 1

如果您输入的类型为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()});

Answer 2

如果您想在表单提交中使用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
}

Answer 3

首先，您需要停止默认表单提交。在提交处理程序中返回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;

});

Answer 4

按下submit按钮后，默认行为是提交表单，然后转到您提供给表单的操作URL。现在，您想要防止这种行为。这意味着，您必须查看表单的onsubmit事件，并阻止实际提交。 jQuery有一个preventDefault()方法来执行此操作。

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

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

here是一个证明它的jsFiddle。

您显然可以对提交按钮执行相同操作，只需将e变量添加为click事件的参数，然后使用e.preventDefault()取消实际提交（但是您仍然可以完美地完成AJAX请求。）

Answer 5

首先，您缺少一些右括号和大括号。确保在浏览器中运行dev工具以检查控制台是否存在类似错误。我通常不使用$ .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;
});

Answer 6

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

PHP中的ajax jquery搜索表单

6 个答案: