提交表单时如何拨打$ .get？

Question

I don't want to submit my form with AJAX, but I want to make a progress bar by making a couple of GET requests to the server during form submission, since the submission might take a while with multiple file uploads. I've found that in webkit browsers, I can't make GET requests while the form is submitting and I was seeing that submitting the form to an iframe would allow me to do it.

The markup looks like this:

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

And the JavaScript:

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

I'm still not getting data back on the GET request--how can I get this to work?

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
    });
  });
});

EDIT

Set a flag that won't allow the form to submit until you've received your response form your get request. Once you've received your response, set your flag to allow your form to submit and then resubmit it programmatically.

$(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();
       });
     }


  });
});

The only way to be certain that your $.get request was completed is to make sure that the form doesn't submit and redirect the page until your $.get request completes.

EDIT #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
        });

  });

});