javascript - 成功提交表单后重定向另一个页面

Question

我需要在成功提交表单后重定向另一个页面。我是 JavaScript 新手。我需要知道如何做正确的事情。通过 AJAX 成功提交表单后重定向到其他页面。首先这段代码在重定向到另一个页面后有一个表单提交。

我正在使用 php/wordpress 进行编程。

php/html代码:

<form id="alecaddd-testimonial-form" action="#" method="post" data-url="<?php echo admin_url('admin-ajax.php'); ?>">

  <div class="field-container">
    <input type="text" class="field-input" placeholder="Adult" id="name" name="name" required>
    <small class="field-msg error" data-error="invalidName">Your Name is Required</small>
  </div>

  <div class="field-container">
    <input type="text" class="field-input" placeholder="infant" id="infant" name="infant" required>
    <small class="field-msg error" data-error="invalidName">Your Name is Required</small>
  </div>


  <div class="field-container">
    <input type="email" class="field-input" placeholder="Child" id="email" name="email" required>
    <small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
  </div>

  <div class="field-container">
    <input type="date" class="field-input" placeholder="date" id="date" name="date" required>
    <small class="field-msg error" data-error="invalidEmail">The Email address is not valid</small>
  </div>



  <div class="field-container">
    <textarea name="message" id="message" class="field-input" placeholder="Your Message" required></textarea>
    <small class="field-msg error" data-error="invalidMessage">A Message is Required</small>
  </div>
  
  <div class="field-container">
    <div>
      <a href="order.php?id=102" class="btn btn-success">
            <button type="stubmit" class="btn btn-default btn-lg btn-sunset-form">BOOK NOW</button>
        </div>
        </a>
    <small class="field-msg js-form-submission">Submission in process, please wait&hellip;</small>
    <small class="field-msg success js-form-success">Message Successfully submitted, thank you!</small>
    <small class="field-msg error js-form-error">There was a problem with the Contact Form, please try again!</small>
  </div>

  <input type="hidden" name="action" value="submit_testimonial">
  <input type="hidden" name="nonce" value="<?php echo wp_create_nonce("testimonial-nonce") ?>">

</form>

Javascript:-

 ! function o(n, i, u) {
function c(r, e) {
    if (!i[r]) {
        if (!n[r]) {
            var t = "function" == typeof require && require;
            if (!e && t) return t(r, !0);
            if (l) return l(r, !0);
            var s = new Error("Cannot find module '" + r + "'");
            throw s.code = "MODULE_NOT_FOUND", s
        }
        var a = i[r] = {
            exports: {}
        };
        n[r][0].call(a.exports, function(e) {
            return c(n[r][1][e] || e)
        }, a, a.exports, o, n, i, u)
    }
    return i[r].exports
}
for (var l = "function" == typeof require && require, e = 0; e < u.length; e++) c(u[e]);
return c }({
1: [function(e, r, t) {
    "use strict";

    function o() {
        document.querySelectorAll(".field-msg").forEach(function(e) {
            return e.classList.remove("show")
        })
    }
    document.addEventListener("DOMContentLoaded", function(e) {
        var a = document.getElementById("alecaddd-testimonial-form");
        a.addEventListener("submit", function(e) {
            e.preventDefault(), o();
            var r = {
                name: a.querySelector('[name="name"]').value,
                email: a.querySelector('[name="email"]').value,
                message: a.querySelector('[name="message"]').value,
                nonce: a.querySelector('[name="nonce"]').value
            };
            if (r.name)

                
                if (/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(String(r.email).toLowerCase()))
                    if (r.message) {
                        var t = a.dataset.url,
                            s = new URLSearchParams(new FormData(a));
                        a.querySelector(".js-form-submission").classList.add("show"), fetch(t, {
                            method: "POST",
                            body: s
                        }).then(function(e) {
                            return e.json()
                        }).then(function(e) {
                            window.location.href = 'https://www.google.com';
                        }).catch(function(e) {
                            o(), a.querySelector(".js-form-error").classList.add("show")
                        }).then(function(e) {
                            o(), 0 !== e && "error" !== e.status ? (a.querySelector(".js-form-success").classList.add("show"), a.reset()) : a.querySelector(".js-form-error").classList.add("show")   
                        })
                       
                    } else a.querySelector('[data-error="invalidMessage"]').classList.add("show");
            else a.querySelector('[data-error="invalidEmail"]').classList.add("show");
            else a.querySelector('[data-error="invalidName"]').classList.add("show")
        })
    })
}, {}] }, {}, [1]); //# sourceMappingURL=form.js.map

一如既往，我们非常感谢您的帮助。

Answer 1

替换header("Location:http://www.google.com");

与:

window.location.href = 'https://www.google.com';

header() 是一个 PHP 函数，意思是“在将响应发送回客户端(浏览器)之前，添加 Location: header 。此 header 告诉 chrome使用 301 或 302 状态代码重定向。PHP 代码显然不能在 Javascript 中运行。

考虑到 javascript 仅在浏览器中发生，因此无需设置 header 。您可以告诉 javascript 直接将当前窗口导航到您指定的 URL。