你能在同一个提交的一个函数中有两个ajax调用吗？

Posted 2021-04-06

我有一个函数的提交按钮和验证目的，我需要在单击提交时运行两个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调用返回错误，我需要表单留在页面上。目前，如果第一个调用返回错误，它将移至下一页。

答案

由于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，但你不能捕获每个ajax的答案以使两者一起工作。

在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 */
      }
    });
  });
});