jquery - Ajax-POST 成功仅 Async 为 false

Question

我正在尝试将 ajax 调用发送到我的后端。如果我设置async: false，，它工作正常，但如果我删除它，它就会失败并在错误部分返回未定义

 $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: "http://localhost:8000/student/queue/create",
        data: data,
        processData: false,
        contentType: false,
        cache: false,
        timeout: 600000,
        success: function (data) {
            console.log("SUCCESS : ", data);

        },
        error: function (e) {
            console.log("ERROR : ", e.responseText);
            alert("ERROR : "+  e.responseText);

        }
    });

从按钮 onclick 调用我的 ajax 函数

<button type="submit" id="submit-createqueue" class="btn feedback glass" onclick="sendformDataToBackend()">Submit</button>

我试过Ajax Call returns undefined when async is true但这也不起作用

function Call(data) {

    return $.ajax({
        url: "http://localhost:8000/student/queue/create",
        type: "POST",
        enctype: 'multipart/form-data',
        data: data,
        processData: false,
        contentType: false,
        cache: false,
        timeout: 600000,

        error: function (e) {
        console.log("ERROR : ", e.responseText);
        alert("ERROR : "+  e.responseText);
        }

    });
}

Call(data).then(function(data) {
    console.log(data);
    alert("test")
});

Answer 1

您需要停止单击“提交”按钮时也会发生的表单提交。它与 async: false 一起使用，因为它会在请求处理过程中阻止处理 - 这正是您不应该使用它的原因。

我还强烈建议您停止使用 on* 事件属性。请改用不显眼的事件处理程序。

当您使用 jQuery 时，您可以使用以下代码实现这两个目标:

$('#yourFormElement').on('submit', function(e) {
  e.preventDefault();

  var data = // your logic to get form data here...

  $.ajax({
    type: "POST",
    enctype: 'multipart/form-data',
    url: "http://localhost:8000/student/queue/create",
    data: data,
    processData: false,
    contentType: false,
    cache: false,
    timeout: 600000,
    success: function (data) {
      console.log("SUCCESS : ", data);
    },
    error: function (e) {
      console.log("ERROR : ", e.responseText);
      alert("ERROR : " +  e.responseText);
    }
  });
});