Question

我想使用模态弹出窗口中的响应来中断ajax请求，然后执行它或根据该响应中止它。

我已正确启动beforeSend，但无论如何都要执行ajax请求，然后才能对模态中的用户输入执行任何操作。

理想情况下，ajax请求不会触发，直到值从confirmResubmit返回。

我了解我可能需要使用ajax.abort();来实际停止请求，但我不确定如何在此上下文中实现它。

我意识到我正在问如何让AJAX同步执行......有没有办法做我想做的事情？还是我走错了路？

function readyMyForm() {
  $("#my_button").submit(function(event){
    // prevent html submission
    event.preventDefault();

    // start the spinner
    spinner.spin(document.getElementById("spinner"));

    var myAjaxRequest = $.ajax({
      beforeSend: confirmResubmit(),
      dataType: "json",
      url: $(this).attr('action'),
      method: $(this).attr('method'),
      data: $(this).serialize(),
      timeout: 15000
    });

    myAjaxRequest.done(function(data) {
      if (data.errors) {
        // handle rescued ruby errors
        displayErrors(data.errors);
      } else {
      updateMyPage(data);
      }
    })

    myAjaxRequest.fail(function(jqXHR, textStatus, data) {
      // handle AJAX errors
      displayErrors(textStatus);
    })
  });
}

beforeSend可以正常调用confirmResubmit()，但在我到达debugger;

之前，AJAX请求会触发

function confirmResubmit() {
  var dataFromPage = $(document.getElementById('where-my-data-lives'))[0].dataset.dataIWant;
  if (dataFromPage != null && dataFromPage != "") {
    var confirm = $('#confirmation_modal').foundation('reveal', 'open');
    debugger;
    // do something with returned value from confirm
  };
}

从模态中获取响应是微不足道的，但这里是JS的完整性

  $('#confirm_resubmit').click(function() {
    $('#confirmation_modal').foundation('reveal', 'close');
    true;
  });

  $('#cancel_resubmit').click(function() {
    $('#confirmation_modal').foundation('reveal', 'close');
    false;
  });

Answer 1

所以这是有效的设置 - 以这种方式传递表单属性感觉有点笨重，但它的工作原理。真的最后是关于vanilla JS而不是AJAX。

问题的答案＆＃39;如何让AJAX请求等待用户的响应？＆＃39;不是这样做的。请勿中断请求，请勿使用beforeSend。相反，只有在得到我想要的响应后才调用AJAX请求。

对于任何试图在弹出窗口中将变量传递给模态的人来说，这也许是有趣的。有一段时间，我试图找出如何将formAttributes传递给'#confirmation_modal'。我认为答案是从模态内部定位数据，而不是试图在调用中传递数据。

function readyMyForm() {
  $("#my_button").submit(function(event){
    // prevent html submission
    event.preventDefault();

    var formAttributes = [$(this).attr('action'), $(this).attr('method'), $(this).serialize()]
    var dataFromPage = $(document.getElementById('where-my-data-lives'))[0].dataset.dataIWant;
    if (dataFromPage != null && dataFromPage != "") {
      var confirm = $('#confirmation_modal').foundation('reveal', 'open');
    } else {
      // submit AJAX without confirmation if no data already present
      runMyRequest(formAttributes);
    };
  });
}

提取AJAX函数

function runMyRequest(formAttributes) {
  // start the spinner
  spinner.spin(document.getElementById("spinner"));

  // form attr passed from caller
  var myAjaxRequest = $.ajax({
    dataType: "json",
    url: formAttributes[0],
    method: formAttributes[1],
    data: formAttributes[2],
    timeout: 15000
  });

  myAjaxRequest.done(function(data) {
    if (data.errors) {
      // handle rescued ruby errors
      displayErrors(data.errors);
    } else {
    updatePageData(data);
    }
  });

  myAjaxRequest.fail(function(jqXHR, textStatus, data) {
    // handle AJAX errors
    displayErrors(textStatus);
  });
}

更新处理程序

$('#confirm_resubmit').click(function() {
  // submit AJAX on confirmation
  var formAttributes = [$('#my_form_id').attr('action'), $('#my_form_id').attr('method'), $('#my_form_id').serialize()];
  $('#confirmation_modal').foundation('reveal', 'close');
  runMyRequest(formAttributes);
});

等待基于模态的响应执行ajax请求

1 个答案: