You can redirect with an AJAX request. However, you will find that the results will not be quite what you expected.
On a redirect, Laravel will should set your response code header as a redirect response and then the content of the redirected page would be sent.
You could do one of two things depending on how you wanted to handle things.
- Send a JSON response back to the submitted form with a meta data parameter and then use this meta data in your success function to set
window.location
.
Your Laravel controller responding to the post would look a bit like this:
public function postQuestion()
{
// DO stuff to set your $question
return [
'question' => $question,
'meta' => [
'redirect_url' => url('mywebsite/question/'.$question->id),
'status' => '400',
// Any other meta data you may want to send
],
];
}
Then assuming you are doing some jQuery AJAX call, change your success callback (I'm calling it questionSubmitSuccess
here):
questionSubmitSuccess = function (data) {
// Anything you may want to do before redirecting the user
if (data.meta.redirect_url) {
// This redirects the page
window.location = data.meta.redirect_url;
}
}
- Continue redirecting from your controller and then do something a bit more similar to rails turbo links and replace the entire page with Javascript:
You can do this a few ways: using [Modify the URL without reloading the page browser History API), or using jQuery.load to submit your form.
The browser history API might work a bit easier as it would still allow you to handle response errors, but it only works in more modern browsers.
jQuery.load would likely require rewriting a bit of your AJAX submitting code and is harder to handle things like errors (it will replace your page content no matter the status code from what I can tell), but it has better browser support.
IMO, the first approach is a bit more maningful as the API endpoint is usable by something other than this single implementation.
Also, there are fewer points of failure and error states to manage compared to trying to replace your entire DOM without a page reload.