Php 如何在WordPress中提交同一页面中的表单数据而不重新加载页面？

我有一个定制的PHP模板-表单。我正在尝试使用AJAX在同一页面中发送此表单，而无需重新加载页面。提交后隐藏表单并显示

谢谢

消息。此表单以模式显示。但实际情况是页面仍在重新加载

HTML

<form method="POST" action="" name="modalForm" id="modalForm" enctype="multipart/form-data" autocomplete="off">
        <input placeholder="Last Name*" type="text" name="lastName" id="lastName" value="" required>
        <label class="error" for="name" id="lastName_error">This field is required.</label>
        <input placeholder="First Name*" type="text" name="firstName" id="firstName" value="" required>
        <label class="error" for="name" id="firstName_error">This field is required.</label>
        <input placeholder="Email Address" type="email" name="Email" id="Email" onblur="this.setAttribute('value', this.value);" value="" required>
        <label class="error" for="email" id="email_error">This field is required.</label>
        <span class="validation-text">Please enter a valid email address.</span>
        <input placeholder="Mobile Number*" type="text" name="contactNumber" id="contactNumber" onkeypress="return isNumberKey(event)" value="" size="11" minlength="11" maxlength="11" pattern ="^09\d{9}$" required>
        <label class="error" for="contactNumber" id="contactNumber_error">This field is required.</label>
        <input type="submit" name="submit" value="Submit" id="form-submit">
</form>

此字段必填。
此字段必填。
此字段必填。
请输入有效的电子邮件地址。
此字段必填。

JS

    (function($) {
    $('.error').hide();
    $(".button").click(function() {
      // validate and process form here

      $('.error').hide();
        var name = $("input#lastName").val();
        if (lastName == "") {
        $("label#lastName_error").show();
        $("input#lastName").focus();
        return false;
      }
        var name = $("input#firstName").val();
        if (lastName == "") {
        $("label#firstName_error").show();
        $("input#firstName").focus();
        return false;
      }
        var email = $("input#Email").val();
        if (Email == "") {
        $("label#email_error").show();
        $("input#Email").focus();
        return false;
      }
        var phone = $("input#contactNumber").val();
        if (contactNumber == "") {
        $("label#contactNumber_error").show();
        $("input#contactNumber").focus();
        return false;
      }

    });

    var dataString = 'lastName='+ lastName + '&Email=' + Email + '&contactNumber=' + contactNumber;
  //alert (dataString);return false;
  $.ajax({
    type: "POST",
    url: "/wordpress-page/",
    data: dataString,
    success: function() {
      $('#modalForm').html("<div id='message'></div>");
      $('#message').html("<h2>Contact Form Submitted!</h2>")
      .append("<p>We will be in touch soon.</p>")
      .hide()
      .fadeIn(1500, function() {
        $('#message').append("<img id='checkmark' src='images/check.png' />");
      });
    }
  });
  return false;
});

（函数（$）{
$（'.error'）.hide（）；
$（“.button”）。单击（函数（）{
//在此验证并处理表单
$（'.error'）.hide（）；
var name=$（“输入#lastName”）.val（）；
如果（lastName==“”）{
$（“label#lastName_error”）.show（）；
$（“输入#lastName”）.focus（）；
返回false；
}
var name=$（“输入#firstName”）.val（）；
如果（lastName==“”）{
$（“label#firstName_error”）.show（）；
$（“输入名”）.focus（）；
返回false；
}
var email=$（“输入电子邮件”）.val（）；
如果（电子邮件==“”）{
$（“label#email_error”）.show（）；
$（“输入电子邮件”）.focus（）；
返回false；
}
var phone=$（“输入#联系人号码”）.val（）；
如果（联系人号码==“”）{
$（“标签#联系人号码_错误”）.show（）；
$（“输入#联系人号码”）.focus（）；
返回false；
}
});
var dataString='lastName='+lastName+'&Email='+Email+'&contactNumber='+contactNumber；
//警报（数据字符串）；返回false；
$.ajax({
类型：“POST”，
url:“/wordpress page/”，
数据：dataString，
成功：函数（）{
$（'#modalForm'）.html（“”）；
$（'#message'）.html（“已提交联系人表单！”）
.append（“我们将很快联系。
”）
.hide（）
.fadeIn（1500，函数（）{
$（“#消息”）。追加（“”）；
});
}
});
返回false；
});

我用和创建了一个小提琴

整个代码尽快运行，但应在DOM就绪后运行，以便选择器可以匹配DOM元素：

（function（$）{

应更改为

（$（document）.ready（function（）{

您的选择器

$（'.button'）

与任何元素都不匹配，在您的情况下，它应该与提交按钮

$（'#表单提交'）

我将添加

preventDefault（）

，以确保提交按钮（提交表单）的默认操作不会发生

表单验证真的搞砸了。您正在检查未设置的变量

您的

dataString

也使用未设置的变量。（名字也丢失。）

我将ajax调用交换为

控制台.log

来转储数据，但保留了success函数

---

您的代码中有太多小错误，以至于在问这个问题之前，您似乎是从不同的源代码中复制了它，而没有进行太多的调试

---

在编写代码时，尝试一步一步地调试。

将click事件的结束括号（第32行）移到底部（第51行之后），你应该会没事的。你可能想研究一下使用内置的WP AJAX来处理你的请求，这样你就可以挂接到调用中，而不需要让页面接收@SpazzMarticus的数据。表单提交后，页面仍在重新加载。我试着应用你给出的固定代码，但wordpress页面仍在表单su后重新加载BmittedTheFiddle工作，你的javascript文件包括正确吗？调试日志消息如下：是的，这就是我想知道为什么ajax在我的wordpress页面上不工作你能帮我解决这个问题吗，这是Ajaxing的延续