Ajax Post-Submit函数提交两次

Ajax Post Submit Function Submits Twice

本文关键字:两次 Post-Submit 函数 提交 Ajax      更新时间:2023-09-26

我在SO和其他地方尝试了许多其他解决方案来解决这个问题,但我似乎无法阻止我的表单提交两次。这是我目前遇到这个问题的代码:

jQuery代码

$(function() {
  var additemtoform = $('#additemform');
  var handleData = function(responseData) {
    if ($(responseData).find('#repitems').length) {
      var replacement = $('<div />').html(responseData).find('#repitems').html();
      $('#test').html(replacement);
    } else {
      additemtoform.submit();
    }
  };
  $("#additemform .addbtn").on("click", function(e) {
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'WebCatPageServer.exe',
      dataType: 'html',
      cache: false,
      data: additemtoform.serialize(),
      beforeSend: function() {},
      success: function(data) {
        handleData(data);
      },
      error: function() {
        alert('error');
      }
    });
    return false;
  });
});

如果我在回调中删除了提交,那么表单就根本不提交。那么,我错过了什么?

谢谢!

更新
请注意,根据以下Habbe的建议,此代码是对原始代码的更新。然而,双重提交的同样问题仍然存在。

HTML代码(生成)

  <form name="AddItem" id="additemform" method="post" action="WebCatPageServer.exe">
    <input name="Action" type="hidden" value="Add_Item" />
    <table>
    <tbody>
    <tr>
    <td><a href="WebCatPageServer.exe?PROD_FULL&ProdInfo=00012000551">BRW2394746301</a></td>
                    <td>239-47463-01</td>
                    <td>Gas Valve Complete, Icon Natural Gas</td>
                    <td> $207.32</td>
                    <td>Available</td>
                    <td>
                        <input name="Q1" tabindex="1" class="qtyfield" type="text" size="1" value="0" onblur="clickrecall(this,'0')" onfocus="Q1.select()" />
                    </td>
                    <td>
                        <input name="P1" type="hidden" value="BRW2394746301" />
                        <input name="M1" type="hidden" value="239-47463-01" />
                        <input name="D1" type="hidden" value="Gas Valve Complete, Icon Natural Gas" />
                        <button type="button" class="button lightgray smallrounded addbtn" value="Add">Add</button>
                    </td>
                </tr>
                <tr>
                    <td><a href="WebCatPageServer.exe?PROD_FULL&ProdInfo=00012000552">BRW2394746501</a></td>
                    <td>239-47465-01</td>
                    <td>Gas Valve Complete , Icon Propane</td>
                    <td> $272.58</td>
                    <td>Available</td>
                    <td>
                        <input name="Q2" tabindex="2" class="qtyfield" type="text" size="1" value="0" onblur="clickrecall(this,'0')" onfocus="Q2.select()"/>
                    </td>
                    <td>
                        <input name="P2" type="hidden" value="BRW2394746501" />
                        <input name="M2" type="hidden" value="239-47465-01" />
                        <input name="D2" type="hidden" value="Gas Valve Complete , Icon Propane" />
                        <button type="button" class="button lightgray smallrounded addbtn" value="Add">Add</button>
                    </td>
                </tr>
                <tr>
                    <td><a href="WebCatPageServer.exe?PROD_FULL&ProdInfo=00012000553" style="text-decoration:underline;">BRW2334784505</a></td>
                    <td>233-47845-05</td>
                    <td>Pilot Assembly, Icon Natural Gas</td>
                    <td>  $32.58</td>
                    <td>Available</td>
                    <td>
                        <input name="Q3" tabindex="3" class="qtyfield" type="text" size="1" value="0" onblur="clickrecall(this,'0')" onfocus="Q3.select()" />
                    </td>
                    <td>
                        <input name="P3" type="hidden" value="BRW2334784505" />
                        <input name="M3" type="hidden" value="233-47845-05" />
                        <input name="D3" type="hidden" value="Pilot Assembly, Icon Natural Gas" />
                        <button type="button" class="button lightgray smallrounded addbtn" value="Add">Add</button>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

解决方案-最终代码

事实证明,我想得太多了。表单是在初次提交时通过ajax提交的。该表单已在回调中再次提交。由于在初次提交时有一个项目被添加到购物车中,我只是在回调中加载了购物车页面。

$(function() {
var additemtoform = $('#additemform');
// Reset Qty to 0 on Page Load
$('#additemform .inputqty').val('0');
//Ajax CallBack
var handleData = function(responseData) {
if ($(responseData).find('#repitems').length) {
var replacement = $('<div />').html(responseData).find('#repitems').html();
$(replacement).appendTo('body').modal();
} else {
location.href =  "WebCatPageServer.exe?Cart";
}
};
$("#additemform .addbtn").on("click", function(e) {
e.preventDefault();

// If qty is 0, set value to 1
if($(this).closest('tr').find('input[type=text]').val() === '0'){
$(this).closest('tr').find('input[type=text]').val('1');
}
else {
}

// Post Form
$.ajax({
type: 'POST',
url: 'WebCatPageServer.exe',
dataType: 'html',
cache: false,
data: additemtoform.serialize(),
beforeSend: function() {},
success: function(data) {
handleData(data);
},
error: function() {
alert('error');
}
});
return false;
});

NB!确保绑定只发生一次,并且表单中没有多个提交元素。

您可以尝试包含event.stopPropagation调用。我看不出这会有什么影响,但也许值得一试。

$(function() {
  var additemtoform = $('#additemform');
  var handleData = function(responseData) {
    if ($(responseData).find('#repitems').length) {
      var replacement = $('<div />').html(responseData).find('#repitems').html();
      $('#test').html(replacement);
    } else {
      additemtoform.submit();
    }
  };
  $("#additemform .addbtn").on("click", function(e) {
    e.preventDefault();
    e.stopPropagation();
    $.ajax({
      type: 'POST',
      url: 'WebCatPageServer.exe',
      dataType: 'html',
      cache: false,
      data: additemtoform.serialize(),
      beforeSend: function() {},
      success: function(data) {
        handleData(data);
      },
      error: function() {
        alert('error');
      }
    });
    return false;
  });
});

在第三行,函数(e)是open,它告诉函数handleData(responseData)运行oy,省略关闭}。然后在ajax中告诉函数handleData(responseData)再次运行。

试试这个:

$(function() {
    var additemtoform = $('#additemform');
    $("#additemform .addbtn").off().on("click", function(e) {
    ///your code

});

我的猜测是,因为您调用了两次提交表单操作。一次在form标记中,第二次在jquery中。试着去掉一个,看看会发生什么。

在第一次ajax调用期间,表单不会提交。只传递调用并接收响应长度0或null。因此,另一部分要求再次提交表格。因此,请尝试在第一次调用之前提交表单,并确保表单提交目标为self()。

祝你好运!