javascript - 什么会导致 ajax 请求从 jQuery 对话按钮多次触发

Question

我有一个创建以下 html 的部分 View :

<div id="tabs-3" style="display: block;">
    <div id="My_List">
    </div>
    <button id="create-log"  role="button"> Create new Comment </button>
  <div id="dialog-log">
      <input type="hidden" value="6265" id="My_ID"/>
      <div><label>Title</label><input id="My_Title" type="text" value=""/></div>
      <div><label>Message</label><textarea id="My_Message">...</textarea></div>
   </div> 
</div>     

部分 View 还会在 html 下方呈现以下脚本 block 。

<script>

$(function () {

    $("#dialog-log").dialog({
        autoOpen: false, modal: true, height: "auto", width: "auto", title: "Add Comments to the Log",
        position: { my: "center top", at: "center top", of: window },
        buttons: {

            "Create Comment": function () { UTIL.CreateComment($("#My_ID").val(), $('#My_Title').val(), $('#My_Message').val(), $(this)); },
            Cancel: function () { $(this).dialog("close"); }
        }
    });
    $("#create-log").button().click(function () {
        $("#dialog-log").dialog("open");
    });


});

</script>

布局 View 包含一个Utility.js 文件。它声明了一个脚本文字，可以促进对话的“创建评论”点击事件中的 ajax 调用。

var UTIL = {

HandleAjaxError : function (jqxhr, textStatus, errorThrown, fn) {
    switch (textStatus) {
        case "timeout": alert(fn + "\n\nStatus:server timeout"); break;
        case "error": alert(fn + "\n\nStatus:general error \nError Thrown:" + errorThrown); alert("object status: " + jqxhr.status + "\nresponse text \n>>>\n" + jqxhr.responseText + "\n<<<\n"); break;
        case "abort": alert(fn + "\n\nStatus:abort"); break;
        case "parsererror": alert(fn + "\n\nStatus:parsererror \nError Thrown:" + errorThrown); alert(jqxhr.responseText); break;
    }
    //alert(jqxhr.responseText);

},
CreateComment: function ($Id, $Title, $Message, $dlg) {

    var mydata = "ID=" + $Id + "&Title=" + $Title + "&Message=" + $Message;

    var jqxhr = $.ajax({ url: "/Log/Create/", type: "POST", dataType: "html", data: mydata

    }).done(
    function (returnhtml) {
        $('#My_List').html(returnhtml);
        $('#My_Title, #My_Message').val("");
        $dlg.dialog("close");

    }).fail(function (jqxhr, textStatus, errorThrown) { UTIL.HandleAjaxError(jqxhr, textStatus, errorThrown); })

}
}

所以浏览器中发生的情况是，有时 - 由于我无法解释的原因 - 当用户单击对话框创建的“创建评论”按钮时会触发多个 ajax 调用。这种情况是随机发生的，但频率很高……足以让我担心。

更重要的是，ajax 调用的重复次数各不相同 - 有时是 3-5，有时是 11-15 ...

我的问题与技术更相关，因为我无法以任何方式复制该行为，尽管它在生产环境中定期发生。

我需要 10 点声誉才能发布屏幕截图...

Answer 1

正如 Kevin B 所指出的，问题可能只是人们不断按下按钮。

按下按钮时，您应该包含一个“发送”选项，然后将其禁用。

这可以通过多种方式完成，但最简单的是设置一个标志:

CreateComment: function ($Id, $Title, $Message, $dlg) {
  // avoid multi-sending
  if($dlg.data().sending)
     return;
  $dlg.data().sending = true;

  var jqxhr = $.ajax({ url: "/Log/Create/", type: "POST", dataType: "html", data: mydata

   }).done(
    function (returnhtml) {
        // reset sending flag so in when opening the dialog again, another comment can be sent
        $dlg.data().sending = false;
        $('#My_List').html(returnhtml);
        $('#My_Title, #My_Message').val("");
        $dlg.dialog("close");

    }).fail(function (jqxhr, textStatus, errorThrown) {
      $dlg.data().sending = false;
...

这样它会检查对话框是否已经在发送数据，并且在数据实际发送之前不会运行(在完成/失败时重置变量)

这应该可以解决浏览器错误或多次点击问题。