[英]Trouble with redirect after form submission
我有一个使用jQuery和Ajax来帮助管理多个文件上传的表单。 除了重定向成功之外,一切正常。 该脚本由堆栈用户prateekkathal提供,如下所示:
$(document).ready(function () //Setting up on Document to Ready Function
{
$("#btnUpload").click(function (event) {
//getting form into Jquery Wrapper Instance to enable JQuery Functions on form
var form = $("#inquiry");
//Serializing all For Input Values (not files!) in an Array Collection so that we can iterate this collection later.
var params = form.serializeArray();
//Getting Files Collection
var files = $("#File1")[0].files;
//Declaring new Form Data Instance
var formData = new FormData();
//Looping through uploaded files collection in case there is a Multi File Upload. This also works for single i.e simply remove MULTIPLE attribute from file control in HTML.
for (var i = 0; i < files.length; i++) {
formData.append(files[i].name, files[i]);
}
//Now Looping the parameters for all form input fields and assigning them as Name Value pairs.
$(params).each(function (index, element) {
formData.append(element.name, element.value);
});
//disabling Submit Button so that user cannot press Submit Multiple times
var btn = $(this);
btn.val("Uploading...");
$.ajax({
url: "relay2.php", //You can replace this with MVC/WebAPI/PHP/Java etc
method: "post",
data: formData,
contentType: false,
processData: false,
success: function () {
//Firing event if File Upload is completed!
alert("Upload Completed");
btn.prop("disabled", false);
btn.val("Submit");
$("#File1").val("");
window.location.replace('https://www.pmd-fla.com/thankyou2.html');
},
});
});
});
我试图弄清楚如何在表单提交后将用户重定向到感谢页面。 该脚本调用表单处理程序脚本,该脚本应该将用户重定向到感谢页面,但我认为success: function ()
正在阻碍。 我不确定如何编辑成功函数以将用户重定向到感谢页面。
任何指导将不胜感激。
编辑:我应该注意,当我在表单操作中包含我的表单处理程序的路径时,它按预期工作,但发送表单数据两次。 我猜这是因为表单处理程序被调用了两次。 一次来自action属性,一次来自上面的脚本。
您可以在成功函数中抛出window.location.href="{path}"
。 警报发出后你会想要这个,一旦点击警报,你就会被重定向 - 这可能会使你在其他所有事情上成功地成为一个有争议的点
$.ajax({
url: "formHandler.php", //You can replace this with MVC/WebAPI/PHP/Java etc
method: "post",
data: formData,
contentType: false,
processData: false,
success: function () {
//Firing event if File Upload is completed!
alert("Upload Completed");
/* you will redirect before the users have a chance to see these actions take effect unless you move them before the alert
btn.prop("disabled", false);
btn.val("Submit");
$("#File1").val("");
*/
window.location.href = 'https://www.pmd-fla.com/thankyou2.html';
},
error: function (error) { alert("Error"); }
});
或者,您可以尝试提交表单
假设表格如此设置......
<form id="inquiry" action="https://www.pmd-fla.com/thankyou2.html">
$.ajax({
url: "formHandler.php", //You can replace this with MVC/WebAPI/PHP/Java etc
method: "post",
data: formData,
contentType: false,
processData: false,
success: function () {
//Firing event if File Upload is completed!
alert("Upload Completed");
/* you will redirect before the users have a chance to see these actions take effect unless you move them before the alert
btn.prop("disabled", false);
btn.val("Submit");
$("#File1").val("");
*/
$('#inquiry').submit()
},
error: function (error) { alert("Error"); }
});
您可以使用的另一种解决方案是通过iframe提交表单。 这样用户仍然可以在同一页面上。
您需要添加和iframe:
<iframe name="ifrm_submit" id="ifrm_submit" style="display:none;"></iframe>
完成此iframe后,您需要更改表单提交数据的方式。 您可以通过向表单元素添加target属性来完成此操作。
<form target="ifrm_submit" method="post" action="formHandler.php">
<!-- I assume that your multiple file inputs are part of this form -->
</form>
您还需要添加一个javascript函数,该函数能够代表表单提交回调。
function fileUploaded(resp){
if(resp.error == 0){
window.location.href=resp.redirect_url;
}else{
alert(resp.message); //assuming there was an error and a message was set for the same
}
}
在处理文件上传的php脚本中,您可以创建一些json数据,然后将其回显到iframe中。
<?php
//handle file upload, validation, etc.
$resp_data = [
'error' => 0, //assuming there were no errors while uploading
'redirect_url' => 'http://someurl.com'
];
echo '<script type="text/javascript"> window.parent.fileUploaded('.json_encode($resp_data).'); </script>';
die();
?>
下面是它的工作原理:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.