您可以在同一个提交上运行的一个函数中调用两个 ajax 吗？

Question

我有一个用于功能的提交按钮，出于验证目的，单击提交时我需要有两个 ajax 功能运行。

    <div class="form-group btn-group">
                  <input type="button" class="btn btn-link" value="Back" onclick="history.back()">
                  <input type="button" class="btn btn-primary" class="btn btn-link" value="View results" onclick="validateAndSubmit();">
                </div>

   async function validateAndSubmit() {
            $('.alert-danger').hide();
            $('.alert-text ul').text("");

            var hasError = false;

  <cfif form.output_type eq "cl2stats">

      $('.alert-danger').hide().find('ul').empty();
      var monthYear1 = $("#date1").val();
      var date1 = monthYear1.slice(0, 3) + "01/" + monthYear1.slice(3, 7);
      const monthYear2 = $("#date2").val(),
        splitted = monthYear2.split('/'),
        month = splitted[0],
        year = splitted[1],
        date2 = `${month}/${new Date(year, month, 0).getDate()}/${year}`;

      await makeGetRequest({
        url: "url?method=validateDateRange",
        data: {date1: date1, date2: date2}
      })
              .done(function (response) {
                if (response == "") {
                  document.getElementById("EIMEF_WATER_UTILITY_STATS").submit();
                } else {
                  $('.alert-danger').show().find('ul').html(response);
                  hasError = true;
                }
                $(window).scrollTop(0);
              });

  </cfif>

    if (hasError == false) {
      $.ajax({
        type: "POST",
        url: "url?method=regStatsExceedancesFilter2",
        dataType: "json",
        data: ({
          formString: formData
        }),
        success: function (response) {
          if (response == "success") {
            $('#EIMEF_WATER_UTILITY_STATS').trigger("submit");
          } else {
            $('.alert-danger').show();
            $('.alert-danger .alert-text ul').append(response);
            $(window).scrollTop(0);
          }
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
          alert("Status: " + textStatus + '\n' + "Error: " + errorThrown);
        }
      });
    }
  }

如果第一个 ajax 调用 returns 出错，我需要将表单保留在页面上。目前，如果第一次调用 returns 出错，它将移至下一页。

Answer 1

因为 ajax 是异步调用...如果您使用常规提交按钮和表单，您的页面将不会等待您进行验证，一种方法是使用 preventDefault() 来防止表单被已提交。

下一步您可以在第一个完成或完成后调用您的第二个 ajax，并且仅在第二个 ajax 调用您提交或表单或不要。

window.addEventListener("load", function(){
  /* Declaring Functions */
  const Validations = () => {
    $.ajax({
      type: "POST",
      url: "...",
      dataType: "json",
      data: {
        "somedata": "..."
      },
      success: function (response) {
        /* Passed in first validation */
        /* Call the second validation */
        Validation2();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown){
        /* Throw Error */
      }
    });
  }

  /* Declaring Functions */
  const Validation2 = () => {
    $.ajax({
      type: "POST",
      url: "...",
      dataType: "json",
      data: {
        "somedata": "..."
      },
      success: function (response) {
        /* Passed in second validation */
        /* Submit the form */
        $("#MyForm").unbind('submit').submit();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown){
        /* Throw Error */
      }
    });
  }

  /* Declaring Events */
  // If you place your JS inside CFM page you will have to place 2 # or will prompt a error
  $("#MyForm").submit(function(e){
    e.preventDefault();
    Validations();
  });


});

或者...如果你想保持 2 ajax 分开，你可以在你的按钮中绑定两个 ajax on click 事件，但你无法捕获每个的答案让两者一起工作。

在 javascript 中，您可以将相同的事件绑定到相同的元素，它们相互堆叠。

window.addEventListener("load", function(){
  $("#MyButton").click(function(e){
    e.preventDefault();

    /* Call Ajax 1 */
    $.ajax({
      type: "POST",
      url: "...",
      dataType: "json",
      data: {
        "somedata": "..."
      },
      success: function (response) {
        /* Passed in first validation */
        /* Call the second validation */
        Validation2();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown){
        /* Throw Error */
      }
    });
  });

  $("#MyButton").click(function(e){
    e.preventDefault();

    /* Call Ajax 2 */
    $.ajax({
      type: "POST",
      url: "...2",
      dataType: "json",
      data: {
        "somedata2": "...2"
      },
      success: function (response) {
        /* Passed in first validation */
        /* Call the second validation */
        Validation2();
      },
      error: function(XMLHttpRequest, textStatus, errorThrown){
        /* Throw Error */
      }
    });
  });
});

您可以在同一个提交上运行的一个函数中调用两个 ajax 吗？

Can you have two ajax calls in one function that run on the same submit?

javascript

ajax

coldfusion

您可以在同一个提交上 运行 的一个函数中调用两个 ajax 吗？

Can you have two ajax calls in one function that run on the same submit?

javascript

ajax

coldfusion

您可以在同一个提交上运行的一个函数中调用两个 ajax 吗？