Javascript 中止AJAX和表单提交，保存、更改并稍后发送

当用户单击某些按钮并提交某些表单时，我需要向他请求其他凭据

我尝试这样做的方式是：

• 拦截提交事件，中止它，并存储副本
• 通过提示对话框（而不是JS本机对话框）请求凭据，因此这都是非阻塞的
• 如果用户输入凭据，请将字段插入事件数据并将其发送到服务器

我当前的AJAX请求代码是：

$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
  if (ajaxOptions.type === "POST") {
    $.current_request = jqXHR;
    jqXHR.abort();
    $.check_password_with_my_dialog();
  }
});

$.check_password_with_my_dialog: function() {
  $("#validate-password-prompt").dialog({
    modal: true,
    title: "input pw",
    buttons: {
      Ok: function() {
        $.password = $("#validate-password-prompt input").val();
        $.deliver_current_request();
        return $(this).dialog("close");
      },
      Cancel: function() {
        return $(this).dialog("close");
      }
    }
  });
}

deliver_current_request: function() {
  $.current_request.beforeSend = function(jqXHR, ajaxOptions) {
    ajaxOptions.data = ajaxOptions.data.concat("&password=" + $.password);
  };
  $.ajax($.current_request);
}

目前的问题是，

ajaxOptions.data

未定义，因此无法添加数据。 而且这些请求似乎是作为一个GET而不是POST发送的

---

我这样做是正确的还是正确的？

更新

下面是我能想到的一个方法来完成你问题的答案

<form id="myForm" >
  <button id="submit-form-btn">Submit</button>
</form>
<div id="validate-admin-password-prompt">
    <input type="password"/>
</div>

---

一种方法是，当用户提交表单时，在实际提交表单之前，首先使用modal获取密码。如果他输入密码，则将密码附加到序列化的表单数据中，并通过ajax post提交表单。否则，如果他取消密码模型，则只需退出或将序列化数据保存在本地内存中，并将其用于进一步操作。这将不起作用，因为打开模式是一个非阻塞操作。代码将继续执行并到达else情况。我能知道非阻塞操作的确切含义吗？意味着代码将继续执行，而不是等待1-打开模式的孔函数；2-等待用户输入；3-验证用户输入；4-返回。因此，我无法将密码注入表单数据，因为在我获得密码时，表单已经提交。（在您的代码中，它将达到else条件，因为pwd将计算为未定义）我认为表单不会提交，因为我们已经编写了“e.preventDefault（）；”语句将阻止按钮的默认行为。这个如何？？你能运行这个让我知道这是你需要的吗？

function submitForm(pwd) {
    var formData = $('form#myForm').serialize() + "&password=" + pwd;
    $.ajax({
        type: "POST",
        url: "http://google.com",
        data: formData,
        dataType: "script"
    });
    alert("POSTed: " + formData.toString());
}

function alertDialog() {
  $("#validate-admin-password-prompt").dialog({
    modal: true,
    title: "Admin password is required",
    zIndex: 10000,
    buttons: {
      Ok: function() {
        $(this).dialog("close");
        var pwd = $("#validate-admin-password-prompt input").val();
        submitForm(pwd);
      },
      Cancel: function() {
        $(this).dialog("close");
        alert('Not authorized to submit the form');
        return false;
      }
    }
  });
}
$("#submit-form-btn").click(function(e) {
  e.preventDefault();
  $ele = $("#validate-admin-password-prompt input");    
  if ($ele.val()==null || $ele.val().trim()=="") {
      alertDialog();
  } else {
      submitForm($ele.val());
  }
});