提交表格后重定向頁面

Question

我有一個表單，可以通過AJAX或使用提交按鈕的常規方式提交 。 Ajax部分在這里：

parentForm.onsubmit = function(e) {                     // e represents trigering event
        if(srteValidateMode()){                             // works only in WYSIWYG mode
            var outputString = srteEditArea.innerHTML;      // first we prepare the text output data
            outputString = outputString                         
                    .replace(/<(\/?)strong>/gi, '<$1b>')    // unify output tags for all browsers -> B I P (instead of strong em div)
                    .replace(/<(\/?)em>/gi, '<$1i>')
                    .replace(/<(\/?)br>/gi, '<p>')
                    .replace(/<(\/?)div/gi, '<$1p');
            document.getElementById('simpleRTEoutput').value=outputString; // pass output string to hidden form field

            if (srteAjaxSubmit) {                           // ajax version - filling FormData
                e.preventDefault();                         // canceling the submit function - we will call it with Ajax
                var srteFormData = new FormData(e.target);  // getting form data from submitted form
                var ajaxRequest = new XMLHttpRequest();     // now going to invoke AJAX

                ajaxRequest.onreadystatechange = function () {
                if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
                    srteShowInfo(ajaxRequest.responseText); // return message and display as info window
                    }
                }
                ajaxRequest.open("POST", e.target.action);  // getting target script from form action
                ajaxRequest.send(srteFormData);             // send FormData

            }
            else {                                          // Standard submit
                return true;                                // true = standard submit will proceed (works ok)
            }
        }
        else {return false;}                                // on false return form will not be submitted
        }; 

工作正常。 現在，我想添加重定向功能-單擊另一個具有某些onclick功能的（非提交）按鈕以保存（執行預定義的提交）並重定向。 我有這樣的想法（未經測試），但不確定它是否特別適用於AJAX部分。

function srteSubmitForm(redirectTo) {
    if (srteAjaxSubmit) {                   // redirect when submitted via Ajax Call
        parentForm.submit();                // save form data
        window.location.href = redirectTo;  // change location - does it wait for previous function ?
    }
    else {
        parentForm.action = parentForm.action + '?redirect=' + redirectTo; // rest handled by target PHP
        parentForm.submit();
    }
}

HTML中的按鈕如下所示：

<input type="button" onclick="srteSubmitForm(\"somepage.php?page=A\")" value="Redirect A">
<input type="button" onclick="srteSubmitForm(\"somepage.php?page=B\")" value="Redirect B">
<input type="button" onclick="srteSubmitForm(\"somepage.php?page=C\")" value="Redirect C">

我不確定，是否需要在重定向之前以某種方式等待AJAX​​完成？ 或其他方式如何在提交后重定向？

請沒有jQuery解決方案。 謝謝，揚

Answer 1

為什么不將'callback'參數添加到調用完成時被調用的Submit方法中。

parentForm.submit(function(status){
    //The call completed, you can display a confirm message 'Form submitted, 
    //now redirecting' (because it's not nice to redirect without warning ;)
    window.location.href = redirectTo;
}); 

並在您的提交中：

ajaxRequest.onreadystatechange = function () {
    if (ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
        srteShowInfo(ajaxRequest.responseText);
        if(callback instanceof Function) callback(ajaxRequest.responseText);
    }
}