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

【问题标题】：Why data is being submitted twice through ajax?为什么要通过 ajax 提交两次数据？
【发布时间】：2014-01-28 23:11:30
【问题描述】：

我正在使用 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 并按回车键时，数据将两次提交到数据库中。

请给我任何解决方案。

【问题讨论】：

只是一个小评论，为什么不让 first_req.php 在完成后调用 sencond_req.php，这样你就可以将两个请求保存给用户。
@Mohammed Joraid，我无法理解你的问题（为什么 php 与此有关？）
很抱歉。我的意思是，为什么 php 被添加为问题标签，而它与问题无关。看起来，您的问题仅与 HTML 和 JQuery 有关。
顺便说一句，下面有两个答案。请选择为您提供解决方案的答案，如果没有，请发表评论，让答案作者知道他的答案不准确。谢谢。

标签： php ajax codeigniter jquery

【解决方案1】：

this、this 和 this 可能重复

在文档READ HERE

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

换句话说，当你点击回车时，你会触发表单的默认提交，你的jquery也会提交表单。

解决办法：

通过添加e.preventDefault(); 来防止默认行为。阅读 -> 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);
});

【讨论】：

【解决方案2】：

即使您使用 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 来自事件处理程序，如果您想阻止默认和操作并停止提交事件的冒泡

【讨论】：