Question

我编写了一个AJAX脚本，用于保存表单数据，然后在一次单击事件中显示此数据所有内容的预览页面。这是脚本：

$('#ajax-preview').click(function(e) { var formData = $('#advertiser-edit-form').serializeArray(); $.ajax({ type: 'post' , url: "ajax-preview.php", data: formData, success: function(data, status, jqXHR) { previewURL = data; $('#ajax-preview').attr('href', previewURL); } }); });

问题在于，有时PHP脚本无法在用户进入预览页面之前完成其保存例程。在这种情况下，当用户进入预览页面时，用户将看到未更新的数据。然后他将不得不重新加载页面以查看更改。

如何设计脚本，以便只有在AJAX更新数据后才能将用户带到previewURL？

Answer 1

问题是，click处理程序中的代码只有启动 ajax调用，它不会等待它完成，因此点击了默认行为（链接后）立即发生，而ajax调用仍在运行。你不能让点击事件等待，除非你想让ajax调用同步，这会导致用户体验不佳。

相反，我建议用一个按钮来生成预览，然后进行ajax调用，然后让ajax结果显示（取消隐藏）用户可以单击以查看预览的链接。

粗略的例子：

＆＃13;

$("#btn-create-preview").click(function() {
  var pending = $("#preview-pending"),
      msg = $("#preview-message"),
      btn = this;
  btn.disabled = true;
  msg.hide();
  pending.fadeIn("fast");
  // Simulate ajax via setTimeout
  setTimeout(function() {
    // This is the ajax completion function
    pending.hide();
    msg.find("a").attr(
      "href",
      "http://example.com?x=" + Math.floor(Math.random() * 10000)
    );
    msg.fadeIn("fast");
    btn.disabled = false;
  }, 1000);
});

＆＃13;

<input type="button" id="btn-create-preview" value="Create Preview">
<em id="preview-pending" style="display: none">
  Building your preview...
</em>
<span id="preview-message" style="display: none">
  Your preview is ready;
  <a href="">click here</a>
  to view it.
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

延迟点击事件直到AJAX完成

1 个答案: