Можете ли вы иметь два вызова 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 возвращает ошибку, мне нужно, чтобы форма оставалась на странице.В настоящее время, если первый вызов возвращает ошибку, он переходит на следующую страницу.

Answer 1

Поскольку ajax - это асинхронный вызов ... ваша страница не будет ждать, пока вы будете выполнять валидацию, если вы используете обычную кнопку отправки и форму, один из способов сделать это - использовать protectDefault () для предотвращения отправки формы.

Следующим шагом вы можете позвонить своему второму 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 по событию 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 */
      }
    });
  });
});