Question

我有以下名为coupon.js的javascript文件 -

jQuery(document).ready(function(){
        jQuery('.appnitro').submit( function() {
$.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        for(var id in data) {
                            jQuery('#' + id).html( data[id] );
                        }
                      }

        });

        return true;
    });

});

sms.php -

<?php
//process form
$res = "message deliverd";
$arr = array( 'content' => $res );
echo json_encode( $arr );//end sms processing
unset ($_POST);
?>

我这样打电话 -

    <form id="smsform" class="appnitro"  method="post" action="sms.php"> 
... 
<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit"/>
</form>
<div id="content"></div>

现在我预计在成功提交表单后，div“content”会显示该消息，而不会刷新任何页面。但相反，页面重定向到/sms.php然后输出 -

{"content":"message deliverd"}

请告诉我哪里出错了。我的javascript是正确的。萤火虫没有显示错误。 或者请告诉其他方法来实现reqd。功能

即使这个coupon.js也无效 -

jQuery(document).ready(function(e){
        jQuery('.appnitro').submit( function() {
$.ajax({
            url     : $(this).attr('action'),
            type    : $(this).attr('method'),
            dataType: 'json',
            data    : $(this).serialize(),
            success : function( data ) {
                        for(var id in data) {
                            jQuery('#' + id).html( data[id] );
                        }
                      }

        });

e.preventDefault();
    });

});

即使我在最后添加返回fasle也不工作。 请建议其他方法来实现此功能

Answer 1

页面刷新的原因是因为submit事件未被抑制。

有两种方法可以做到这一点：

接受事件对象作为事件处理程序的参数，然后在其上调用preventDefault()。
return false。

回答您修改过的问题：您接受错误函数中的e参数，您应该在submit处理程序中接受它，而不是ready处理程序。

Answer 2

我相信您需要在jquery中取消表单提交。来自jQuery文档：

现在提交表单时，消息被提醒。这发生在之前实际提交，所以我们可以通过调用取消提交操作事件对象上的.preventDefault（）或者从我们这里返回虚假处理程序。我们可以触发事件另一个元素是手动的点：

所以在你的代码中：

//add 'e' or some other handler to the function call   
 jQuery(document).ready(function(e){
            jQuery('.appnitro').submit( function() { $.ajax({
                url     : $(this).attr('action'),
                type    : $(this).attr('method'),
                dataType: 'json',
                data    : $(this).serialize(),
                success : function( data ) {
                            for(var id in data) {
                                jQuery('#' + id).html( data[id] );
                            }
                          }

            });
            //return false
            return false;

           //or
           e.preventDefault();
        });

    });

使用jquery显示成功的表单提交

2 个答案: