Question

我有一个基本表单，我想使用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>

表单转储应显示在“results”div中。但是，它没有。

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

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

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

Answer 1

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

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

   $('#qsSearch').click(function(event) {
    event.preventDefault();
    $.post('<cfoutput>#cgi.script_name#</cfoutput>', $('#qsUserForm').serialize(), function(data) {
        $('#results').html(data);
    });
});

Answer 2

在return false;之后，在您的点击处理程序中添加$.post()，以便在您执行功能时停止默认onclick行为。

为什么我的jquery帖子结果消失了？

2 个答案: