ajax page redirection 405 error - html

Question

New to ajax and sorry for asking such a basic question. I am using ajax:
to submit a form (written in python)
to conduct some calculation and generate output page, and
to redirect the browser to the output page
Currently, Steps 1 and 2 are done, but when the browser tries to redirect, I got a 405 error. I appreciate any suggestions.
HTML form
<form method="post" id="form1">File to upload:
<input type="file" id="upfile1" name="upfile" class="required input_button" accept=".csv" />
<input class="submit_button" type="button" value="Submit" />Upload the file!
</form>
JS code
$('.submit_button').click(function () {
var form_data = new FormData();
$.each($('input[name^="upfile"]')[0].files, function (i, file) {
form_data.append('file-' + i, file);
});
$.ajax({
type: "post",
url: "/geneec_batchoutput.html", ///////NOTE 1/////////
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function () {
window.location = '/geneec_batchoutput.html'; ///////NOTE 2/////////
},
error: function (data) {
console.log('error');
}
});
});
NOTE 1
Form firebug, I can tell the calculations have been finished and the output page is generated.
NOTE 2
Here is the place I got 405 error. So my guess is ajax did not redirect the browser to the "correct" output page, instead it let the browser go to a generic one. So without data support, I got 405 error.
So it seems like my question is how to redirect the browser to the output page generated in ###note 1 at location ###note 2.
update
I have attached a "working" scenario, but this is not the real ajax approach, since I use .submit() to send the form.
html form
<form method="post" id="form1" enctype="multipart/form-data" action=geneec_batchoutput.html>File to upload:
<input type="file" id="upfile1" name="upfile" class="required input_button" accept=".csv" />
<input class="submit_button" type="submit" value="Submit" />Upload the file!
</form>
JS code
form.submit();
$.ajax({
type: "post",
url: "/geneec_batchoutput.html",
success: function () {
window.location = '/geneec_batchoutput.html';
}
});
Update 2
I tried to check the content of url by posting it to the console. It looks like the url has everything I need, which is the output page. So temporally I use $("body").html(url); to replace current page content. But the url is still the /geneec_batchinput.html. Is there a way to update the url as well?
$.ajax({
type: "post",
url: "/geneec_batchoutput.html",
data: form_data,
cache: false,
contentType: false,
processData: false,
success: function(url) {
console.log(url)
$("body").html(url);
},
error: function(data) {
alert('error')
}
});
Thanks!

Answer 1

It looks like the location redirect is getting called as a POST request because it's inside the submit action. Try tweaking your submit handler like so:
$('.submit_button').click(function (event) {
event.preventDefault();
// carry on...
so that you can use event.preventDefault to avoid needing to return something from the submit event.
Update:
This may be it. Using your original code:
$('.submit_button').click(function (event) {
event.preventDefault();
// .. blah blah ..
$.ajax({
type: "post",
url: "/geneec_batchoutput.html", ///////NOTE 1/////////
// .. blah blah ..
success: function () {
window.location = '/geneec_batchoutput.html'; ///////NOTE 2/////////
},
error: function (data) {
console.log('error');
}
});
retun false;
});
Because it's asynchronous, the outer event handler is ending before the location change is issued in the success callback function. I thought the preventDefault would avoid the need to return false, but other similar questions suggest not.