繁体   English   中英

表单提交后重定向问题

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

下面是它的工作原理:

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM