0

这是我的表格：

<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 文件正常返回正确的结果。

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

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

编辑：

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

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

}})});

这对我有用。

感谢你的帮助。

4

6 回答 6

1

如果您有一个 type 的输入submit，它会猜猜是什么:)，提交表单，然后重新加载页面。把它变成：

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

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

现在有几个建议：

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

所以：

$("#pagePanel").load('Classes/requests/search.php', {$('#submitsearch').serialize()});
于 2012-06-18T23:14:10.303 回答
0

如果您想在表单提交中使用 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
}
于 2012-06-18T23:17:34.827 回答
0

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

});
于 2012-06-18T23:19:24.030 回答
0

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

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

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

这是一个 jsFiddle 来演示它。

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

于 2012-06-18T23:21:23.123 回答
0

首先，您缺少一些右括号和大括号。请务必在浏览器中运行您的开发工具以检查控制台是否存在此类错误。我通常不使用 $.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;
});​
于 2012-06-18T23:23:35.907 回答
0

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

于 2012-11-14T08:15:04.250 回答