0

我有一个基本表单，我想使用 ajax 提交，而不必实际重新加载页面。这是代码的要点：

<cfif cgi.request_method EQ "post">
    <cfdump var="#form#" />
    <cfabort />
</cfif>

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

        <script type="text/javascript">
            $(function(){
                $('#qsSearch').click(function(){
                    $.post(
                        '<cfoutput>#cgi.script_name#</cfoutput>',
                        $('#qsUserForm').serialize(),
                        function(data){
                            $('#results').html(data);
                        }
                    );
                });
            });
        </script>
    </head>
    <body>
        <form id="qsUserForm">
            <table>
                <tr>
                    <th>First Name:</th><td><input id="qsFirstName" name="qsFirstName" type="text" /></td>
                    <th>Last Name:</th><td><input id="qsLastName" name="qsLastName" type="text" /></td>
                    <th>Username:</th><td><input id="qsUserName" name="qsUserName" type="text" /></td>
                    <th>Email:</th><td><input id="qsEmail" name="qsEmail" type="text" /></td>
                    <th>User ID:</th><td><input id="qsUserID" name="qsUserID" type="text" /></td>
                    <td><input id="qsSearch" name="qsSearch" type="submit" value="Search" /></td>
                </tr>
            </table>
        </form>
        <div id="results"></div>
    </body>
</html>

表单转储应该显示在“结果”div 中。然而，事实并非如此。

在使用 Firebug 进行调试后，我注意到代码实际上正在正确执行，并且结果被插入到结果 div 中 - 但是，一旦发布代码退出，它就会消失。如果我在 post call 的右括号处放置一个断点，我可以在结果 div 中看到正确的结果——只要代码继续，它就会消失。

我以前经常使用这样的代码 - 这个简单的 ajax 帖子有什么问题？

（我尝试用表单提交处理程序替换搜索按钮单击处理程序，但它没有改变任何东西。）

4

2 回答 2

2

显然，您的表单正在重新加载

您应该使用以下命令停止提交表单：

   $('#qsSearch').click(function(event) {
    event.preventDefault();
    $.post('<cfoutput>#cgi.script_name#</cfoutput>', $('#qsUserForm').serialize(), function(data) {
        $('#results').html(data);
    });
});​
于 2012-06-28T09:30:35.547 回答
1

之后添加return false;单击处理程序，以在您执行完函数后$.post()停止默认onclick行为。

于 2012-06-28T09:51:48.907 回答