Проблема с редиректом после отправки формы

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 () мешает.Я не уверен, как отредактировать функцию успеха, чтобы перенаправить пользователя на страницу благодарности.

Буду признателен за любые рекомендации.

РЕДАКТИРОВАТЬ: Я должен отметить, чтоКогда я включаю путь к своему обработчику формы в действие формы, он работает, как и ожидалось, но отправляет данные формы дважды.Я предполагаю, что это потому, что обработчик формы вызывается дважды.Один раз из атрибута действия и один раз из приведенного выше сценария.

Answer 1

Другое решение, которое вы можете использовать, - это отправить форму через 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. Код javascript в iframe вызывается и вызывает функцию javascript для родительских страниц
4. Javascript для родительских страниц обрабатывает полученный ответ.

Answer 2

Вы можете добавить 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"); }
    });