I am doing a form validating using AJAX. If the user completes the form correctly, it will redirect to another page, else print out errors (plain HTML).
For example: If there is an error in the form, the PHP file echos:
There is an error!
If there aren't any errors, the PHP file executes:
header("Location: http://example.com/successful"); exit();
But in AJAX, I am only handling for the plain HTML response:
success: function(response) {
_desireHTMLelment.innerHTML = response;
}
I know there is a way using json_encode()
, however, I still cannot classify plain HTML and JSON
.
Are there any ways I can do this? Thanks for any support!
Edit: I am using Vanilla JavaScript
This is how the system works:
User fills in the form => AJAX sends requests => PHP processes the request => Either returns an plain HTML error or redirects the page => AJAX receives the response, classify whether it is an error or HTML error => Find a correct way to handle the response
As Quentin mentioned, browsers automatically follow the Location
header and redirect the page, in which case your Ajax response will contain the content of the new page and you will not be able to access the Location
header because it was lost and replaced by the content of the new page. You can use a different name for your header.
It seems from your code that you're using jQuery, not JavaScript Vanilla. You can access the header in jQuery like this:
success: function(response, status, request){
var url = request.getResponseHeader('RedirectURL'); //RedirectURL: your header's name.
}
In JavaScript Vanilla, use the getAllResponseHeaders()
function of the XMLHttpRequest
object to get the header:
var headers = request.getAllResponseHeaders();
But unlike jQuery, you'll have to split and process the headers by yourself.
Once you get the url from the header, you can use:
location.replace(url);
This simulate a redirect. If you want to simulate a link click, use:
location.href = url;
Alternatively, you can send the URL in the response instead of the header. If it always starts with http, you can do something like:
success: function(response) {
if (response.substring(0, 4) == "http") {
location.href = response;
} else {
_desireHTMLelment.innerHTML = response;
}
}
Or you can flag it like this and look for the flag:
RedirectURL: http://example.com/successful
Or you can make it a JSON object:
{"RedirectURL": "http://example.com/successful"}
If the browser recieves a Location
header in the HTTP response, then it will follow the redirect and fetch the document you are being redirected to.
There is no way to read the redirect response with JS.
There are two possible outcomes from your request:
There is an error!
So, to tell which of the two cases you have: Search the response text for There is an error!
.
success: function(response) {
if (response.indexOf("There is an error!" == -1) {
// Handle the error
} else {
_desireHTMLelment.innerHTML = response;
}
}
That said, a better approach would be to change the server side code so it provides a clear API instead of trying to scrape HTML for the data.