How to redirect to another page after making a POST request with jQuery ajax?

Question

On my web app I have a button that when clicked takes the values from some user input and posts it to a flask route.

$( "#button" ).click(function() {
  let data1 = // get data
  req = $.ajax({
              url: '/test',
              type: "POST",
              data: { data1: data1
                  }
            });

Here is the flask route:

@app.route('/test', methods=['GET', 'POST'])
def testing():
    if request.method == 'POST':
        data = request.values.get('data1')
        # here I make some changes to data but it isn't important to question
        new_data = ...
        # I want to redirect to a new route with new_data
    else:
        # do something else...

How can I, after the post request, get redirected to a new route and still be able to access my new_data variable?

Lapskaus · Answer 1 · 2020-04-29T09:11:57.890

0

You can use the ajax done callback to redirect after the ajax call has finished:

$.ajax({
    url: '/test',
    type: "POST",
    data: { data1: data1},
    done: function( serverResponseString) {
        window.location = serverResponseString;
    }
});

edited Apr 29 '20 at 09:11

answered Apr 29 '20 at 09:08

Lapskaus

1,709
1
11
22

but the redirection happens on the server. – Hagai Wild Apr 29 '20 at 09:09
I'm not exactly sure what you mean, if your server creates the route you can return it from your server endpoint and use that in the callback .. see my edit – Lapskaus Apr 29 '20 at 09:11
You are corrent, but I thought he may also want the redirection to happen only on the server, I posted an answer of how to redirect the call without the server returning the route as a response, but rather as a HTTP redirect.. – Hagai Wild Apr 29 '20 at 09:18
Thanks for the answer I manage to adapt this to get the redirect to my new route but I don't know how to access `new_data` in my new route? How can I send that along with the redirect? – repsekif Apr 29 '20 at 11:22
you can create an array/JSON Object on your server side for example `{url: "myURL", anotherValue: 'anotherValue'}`, return that and then access this in the done method like so `serverResponseString.url // 'myURL'` – Lapskaus Apr 29 '20 at 11:28

score 0 · Answer 2 · answered Apr 29 '20 at 09:15

0

on flask:

return redirect("http://www.example.com", code=302)

on client - You cannot redirect to a page using ajax request, as you cannot get the redirection url.

What you may do is either use fetch api to get the redirection url: https://developer.mozilla.org/en-US/docs/Web/API/Response/url

or If you insist on using $.post, you can pass your own custom xhr object, and retrieve the response's url from it.

var xhr = new XMLHttpRequest();
req = $.ajax({
    url: '/test',
    type: "POST",
    data: { 
        data1: data1
    },
    xhr: function() { return xhr; }
    success: function() { location.href = xhr.responseURL; } 
});

NOTICE:

Both methods wouldn't work in IE!

answered Apr 29 '20 at 09:15

Hagai Wild

1,904
11
19

Thanks for the answer I manage to adapt this to get the redirect to my new route but I don't know how to access `new_data` in my new route? How can I send that along with the redirect? – repsekif Apr 29 '20 at 11:22
send it like any response from the server, the redirect url is just a header you're accessing. – Hagai Wild Apr 29 '20 at 11:24
I don't understand sorry – repsekif Apr 29 '20 at 11:26
You might want to create a new question for that, bacause it's not really related to the current question. – Hagai Wild Apr 29 '20 at 11:27
in my head it is the question I've been asking all along, clearly I'm too stupid to explain sorry for wasting your time :( – repsekif Apr 29 '20 at 11:29

How to redirect to another page after making a POST request with jQuery ajax?

2 Answers2