17

I'm trying to AJAXify an old website form without modifying the back end. Originally, the backend would response with a "302 Moved" redirect to a "thank you" page after receiving the form.

Now, when I try to submit the form using a jQuery $.ajax call, the form data gets submitted successfully, but the "302 Moved" redirect seems to get cancelled by the browser and jQuery doesn't know what's going on.

My problem is that no matter what happens, the $.ajax call returns with an error and status = 0, so I have no way to distinguish between a successful submit and an error.

Is there a way to prevent the browser from trying to follow the redirect, or at least getting back the proper response codes? (I'm using Chrome.)

Johnny
  • 171
  • 1
  • 1
  • 3
  • 1
    Anything that isn't a success is a failure to jQuery. However, you could code your error handling to properly return a 500 status code, then you can assume anything else is the redirect. – Kevin B Oct 29 '12 at 21:27
  • 1
    Or, you can code the form handler page to check to see if it is an ajax request, and if it is, don't redirect. `X-Requested-With` – Kevin B Oct 29 '12 at 21:28
  • Good ideas, though I am trying to do this without changing the legacy back end. – Johnny Oct 29 '12 at 21:30
  • With that in mind, do something that will intentionally throw a php error and see what it returns. It may already be returning 500 – Kevin B Oct 29 '12 at 21:32
  • See http://stackoverflow.com/questions/199099/how-to-manage-a-redirect-request-after-a-jquery-ajax-call – mccannf Oct 29 '12 at 22:00

5 Answers5

1

I think no,you can't do it without changing the back-end.You have to change the response header,for Ajax to know/understand what to do.If you made a redirect,you have to change the header,because Ajax call response will not do it.

Hazarapet Tunanyan
  • 2,809
  • 26
  • 30
0

Could this get you in the right direction?

$.ajax({
    type: "GET",
    url: url,
    data: data,
    complete: function(e, xhr, settings){
       if(e.status === 200){
            console.log(e.responseText);
       }else{
            console.log("error");
       }
   }
   });
Morten Bergset
  • 61
  • 3
0

Your backend app propably has relative redirect which may somehow be not processed by jquery ajax. Location header will not include domain name in this situation, just relative path. For some (unclear for me ;)) reasons it may cause same origin policy issues. What is funny, changing redirect to absolute path should fix the issue. Tested on jQuery 1.11.1.

Using code to describe:

Theoretical ajax call:

$.ajax({
    'url': '/your-url',
    'method': 'post',
    'data': form.serialize()
}).done(function(data) {
    // something
}).fail(function(jqXHR, textStatus, errorThrown) {
    // another something
});

So in /your-url controller you may have something similar to:

return $this->response->redirect('//same.domain/path');

or

return $this->response->redirect('/path');

First one wil work. Second one not.

So?

The point is that you propably need to change backend but only a little bit. You don't need to check is the request a XmlHttpRequest if you really don't want to and/or handle it in different way.

Arius
  • 1,387
  • 1
  • 11
  • 24
0

The Ajax code would look like this:

$.ajax({
'url': '/your-url',
'method': 'post',
'data': form.serialize()
}).done(function(data) {
    // something
  }).fail(function(jqXHR, textStatus, errorThrown) {
if (jqXHR.getResponseHeader('Location') != null)
{ 
 window.Location= jqXHR.getResponseHeader('Location');
 }
 // other conditions in failure situation.
});
Nitish Pandey
  • 1
0

Check the form an add {{csrf_field()}}.it is caused when the form get submitted without the token.

jacob
  • 25
  • 1
  • 5