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

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

jquery post

为什么我的jquery帖子结果会消失？,jquery,post,Jquery,Post,我有一个基本表单，我想使用ajax提交，而不必实际重新加载页面。这是守则的要点： <cfif cgi.request_method EQ "post"> <cfdump var="#form#" /> <cfabort /> </cfif> <html> <head> <script type="text/javascript" src="http://code.jquery.

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


$（函数（）{
$（'#qsSearch'）。单击（函数（）{
美元邮政(
“#cgi.script#u name#”，
$（'#qsUserForm'）。序列化（），
功能（数据）{
$（'#results'）.html（数据）；
}
);
});
});
名字：
姓氏：
用户名：
电邮：
用户ID:

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

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

我以前经常使用这样的代码——这篇简单的ajax文章有什么错

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

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

您应使用以下方法阻止表单提交：

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

$（'#qsSearch'）。单击（函数（事件）{
event.preventDefault（）；
$.post（'#cgi.script_name#'，$（'#qsUserForm'）.serialize（），函数（数据）{
$（'#results'）.html（数据）；
});
});

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

您应使用以下方法阻止表单提交：

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

$（'#qsSearch'）。单击（函数（事件）{
event.preventDefault（）；
$.post（'#cgi.script_name#'，$（'#qsUserForm'）.serialize（），函数（数据）{
$（'#results'）.html（数据）；
});
});

添加

返回false$.post（）

后的code>，在执行完函数后停止默认的onclick
行为。
添加返回false$.post（）
后的code>，在执行函数时停止默认的onclick
行为。
它是否会像#结果没有html或#结果刚刚隐藏一样消失？添加一个返回false$.post（）
后的code>。只是一个想法。@nbrooks-返回false同样有效-因为它阻止它继续使用默认提交代码。如果你把它作为一个答案发布，我会给它投票：）它会像#结果没有html或#结果只是被隐藏一样消失吗？添加一个返回false$.post（）
后的code>。只是一个想法。@nbrooks-返回false同样有效-因为它阻止它继续使用默认提交代码。如果你把它作为一个答案贴出来，我会投赞成票：）太好了！我想它可能正在重新加载，但不确定如何停止。非常感谢你！我想我会选择这个方法，而不是nbrooks在评论中建议的“returnfalse”，因为它似乎更清楚地代表了我正在做的事情。。。两种方法中的任何一种都比另一种方法“更好”吗？@froadiereturn false
既是event.preventDefault（）
又是event.stopPropagation（）
。在您的情况下，您只需要event.preventDefault（）
perfect！我想它可能正在重新加载，但不确定如何停止。非常感谢你！我想我会选择这个方法，而不是nbrooks在评论中建议的“returnfalse”，因为它似乎更清楚地代表了我正在做的事情。。。两种方法中的任何一种都比另一种方法“更好”吗？@froadiereturn false
既是event.preventDefault（）
又是event.stopPropagation（）
。在您的情况下，只需要event.preventDefault（）