Question

我不想使用AJAX提交表单，但我希望通过在表单提交期间向服务器发出几个GET请求来创建进度条，因为提交可能需要一段时间才能上传多个文件。我发现在webkit浏览器中，我无法在表单提交时发出GET请求，我发现将表单提交给iframe可以让我这样做。

标记看起来像这样：

<form action="/my-action" target="target-iframe">
...
</form>
<iframe name="target-iframe"></iframe>

JavaScript：

$(document).ready(function() {
  $("form").on("submit", function() {
    $.get("/other-action", function(data) {
      // Use data returned here
    });
  });
});

我仍然没有收到关于GET请求的数据 - 我怎样才能让它工作？

Answer 1

$(document).ready(function() {
  $("form").on("submit", function(e) { //add a parameter e - the event object
     e.preventDefault(); //stop the form from submitting
    $.get("/other-action", function(data) {
      // Use data returned here
    });
  });
});

修改

设置一个不会允许表单提交的标记，直到您收到来自get请求的响应。收到回复后，设置您的标记以允许您的表单提交，然后以编程方式重新提交。

$(document).ready(function() { var canISubmit = false; $("form").on("submit", function(e) { //add a parameter e - the event object var el = $(this); if(!canISubmit) { e.preventDefault(); $.get("/other-action", function(data) { canISubmit = true; el.submit(); }); } }); });

确保您的$.get请求已完成的唯一方法是确保在您的$.get请求完成之前表单未提交并重定向页面。

编辑＃2

$(document).ready(function() { $("form").on("submit", function(e) { //add a parameter e - the event object e.preventDefault(); $.post("url",$(this).serialize()) .done(function(response,status,jqXHR) { $.get("/other-action") .done(function(response,status,jqXHR) { //other stuff done //refresh the page or do whatever.... }) .fail(function() { //$.get failed }); }) .fail(function() { //$.post failed }); }); });

如何在表单提交期间进行$ .get调用？

1 个答案: