javascript - 在提交之前验证表单提交并将结果写入字段，然后提交 - 使用防止默认和 Ajax 请求

Question

当我按下“表单提交”按钮时，我想在实际提交表单之前执行一些验证(通过 Ajax 调用)并更改屏幕值。

我的问题是，当我尝试此操作并手动操作“提交”按钮时，在提交表单之前，屏幕值实际上并未更新。太迟了!

有办法解决这个问题吗？我试图在代码中准确地注释我的意思。

$("form").submit(function (event) {
  // we prevent teh default action of the udpate button
  event.preventDefault();
  alert('In Jquery/JS.. button pressed / Prevented default');
  // variables for "self" so we can access the form
  // nativley using javascript and not jquery
  var self = this,
    root = 'https://jsonplaceholder.typicode.com';
  // Now call Ajax, get results, and if good, manually call the
  // submit button.
  $.ajax({
    url: root + '/posts/1',
    method: 'GET',
    success: function (data) {
      alert('in ajax success');
    }
  }).done(function (data) {
    alert('in ajax done - Title data = : ' + data.title);
    if (data.title !== "") {
      // We assign our Input Text field some data
      $('#textfield').val(data.title);
      // The on screen value actually hasn't updated :o(
      alert('about to self submit');
      // We go to submit... but our form isn't actually
      // updated with the Ajax text yet...
      // is that possible before we action the submit???
      self.submit();
    }
  }).fail(function () {
    alert('error');
  });
});

参见 JSFiddle :https://jsfiddle.net/dave_pace/890zmj1f/

Answer 1

事情不是你想的那样。 JavaScript is single-threaded 。因此，alert 语句会在其前一个语句之后执行。它不会等待上一个语句完成。

除此之外，alert 比在文本框中设置值更快，并且它实际上会阻塞线程，直到线程被关闭为止。这就是为什么您看不到文本框中设置的值，但可以先看到提交警报。

你的 fiddle 很好，并且可以正常工作。如果您想对此进行测试，请尝试从代码中删除所有警报语句，并尝试将表单提交到实际的 URL，例如 https://www.google.com。

虽然提交给 Google 会导致错误，但您实际上可以看到文本框在提交之前已被填充。