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解决方案。谢谢，Jan

Answer 1

为什么不在调用完成时调用的submit方法中添加一个'callback'参数。

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);
    }
}

提交表格后重定向页面

1 个答案: