Question

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

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

我的php代码：

<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 / jQuery

 ! 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:标头。此标头告诉chrome使用301或302状态码进行重定向。PHP代码显然无法在Javascript中工作。

仅在浏览器中考虑到javascript，不需要设置标头。您可以告诉javascript直接将当前窗口导航到您指定的URL。

Answer 2

您可以使用以下方法重定向页面：

通过在头部使用meta标签：

<meta http-equiv="refresh" content="0;url=http://your-page-url.com" />

请注意，在需要重定向页面几秒钟后，将使用content =“ 0; ...

通过使用JavaScript：

window.location.href = "http://your-page-url.com";

使用jQuery：

$(location).attr('href', 'http://yourPage.com/');

Answer 3

使用window.location.href

例如

window.location.href = 'https://stackoverflow.com';

成功提交表单后重定向其他页面

3 个答案: