Question

我正在使用codeiniter框架。我想通过ajax coll在数据库中提交表单数据，在成功提交表单进程后，我想通过其他ajax请求刷新特定的div。

但是当我按Enter键提交表单时，数据将被提交两次。我希望ajax一次按回车键提交数据。

我的代码就像 -

$('#form1').submit(function () {
var id = $('#id').val();
var comment_text = $('#comment_text').val();
$.ajax({
  data: {'id' :id,'comment_text':comment_text},
  type: "POST",
  url: "first_req.php",
  dataType : "json"
  success: function(data){
    if(data.status =="Success")
     {
    $.ajax({
      data: {'id':id},
      type: 'GET',
      url: 'sencond_req.php',
      contentType : "application/x-www-form-urlencoded; charset=UTF-8",
      success: function (data) {
        $('#com_display').html(data);
      }            
    });
     }
     }
    });
  return false;
      });

HTML -

<div id="com_display"></div>
<form id="form1" name="form1">
<input type='hidden' id='id' name='id' />
<input type='text' id='comment_text' name='comment_text' />
</form>

当我在评论栏中输入hi并按回车按钮时，数据将提交两次数据。

请给我任何解决方案。

Answer 1

即使您使用ajax请求提交数据，也不会停止表单提交的默认操作。

您可以致电event.preventDefault()来执行此操作。

$('#form1').submit(function (e) {
    //prevent the default form submission
    e.preventDefault();
    var id = $('#id').val();
    var comment_text = $('#comment_text').val();
    $.ajax({
        data: {
            'id': id,
            'comment_text': comment_text
        },
        type: "POST",
        url: "first_req.php",
        dataType: "json"
        success: function (data) {
            if (data.status == "Success") {
                $.ajax({
                    data: {
                        'id': id
                    },
                    type: 'GET',
                    url: 'sencond_req.php',
                    contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                    success: function (data) {
                        $('#com_display').html(data);
                    }
                });
            }
        }
    });

});

如果要阻止默认和操作并停止冒充提交事件，请从事件处理程序

或return false

Answer 2

this，this和this

可能重复

在文档READ HERE

中

（将事件处理程序绑定到“提交”JavaScript事件，或在元素上触发该事件。）

换句话说，当您单击Enter时，您将触发表单的默认 submit ，并且您的jquery也将提交表单。

解决方案：

通过添加e.preventDefault();来防止默认行为。阅读 - ＆gt; jQuery AJAX Form Submit Example
```
$('#form1').submit(function (e) {        
    e.preventDefault();
    //the rest of code.
```

删除默认行为

$('form').submit(function(){
  $(this).find(':submit').attr('disabled','disabled');
});

<击> 3.仅在实际提交时通过jquery提交表格（不重新提交）

$(document).on("submit", "form.form1", function(event){ alert(1); });

<击>

为什么数据通过ajax提交两次？

2 个答案: