表单提交后重定向问题

Question

我有一个使用 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 属性，一次来自上述脚本。

Answer 1

你可以在你的成功函数中抛出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"); }
    });

Answer 2

您可以使用的另一种解决方案是通过 iframe 提交表单。这样用户仍会在同一页面上。

您需要添加 iframe：

<iframe name="ifrm_submit" id="ifrm_submit" style="display:none;"></iframe>

一旦有了这个 iframe，您就需要更改表单提交数据的方式。您可以通过将目标属性添加到表单元素来做到这一点。

<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();
?>

这是它的工作原理：

1. 表单通过 iframe 提交
2. PHP 输出被发送到 iframe
3. iframe 中的 javascript 代码被调用并调用父页面的 javascript 函数
4. 父页面 javascript 处理收到的响应。