Wordpress ajax 表单提交不使用wordpress 功能可能吗？

Question

我目前正在 Wordpress 上创建网站，需要通过 ajax 提交表单，是否可以在不使用 Wordpress 功能的情况下执行此操作？我当前的代码没有错误，并且在不更新数据库的情况下返回成功消息。我不明白为什么它不起作用请看看我的简化版 -

这是 HTML 格式 -

<form action="" method="post" id="formAppointment" name="appointmentform">
    <input type="text" name="message_first_name" value="" placeholder="First name" id="appointmentFirstName">
    <input type="text" name="message_last_name" value="" placeholder="Last name" id="appointmentLastName">
    <input type="tel" name="message_phone" value="" placeholder="Phone" id="appointmentPhone">
    <input type="submit" id='appointmentSubmit' class='xAnim' name="submit">
</form>

这是 jquery AJAX -

$("#formAppointment").submit(function(e){
    var firstname    = $("#appointmentFirstName").val();
    var lastname     = $('#appointmentLastName').val();
    var phone        = $('#appointmentPhone').val();
    var dataString = 'message_first_name='+ firstname + '&message_last_name=' + lastname + '&message_phone=' + phone;


    if(firstname.trim() == "" || lastname.trim() == "" || phone.trim() == ""){

        alert('missing information');

         e.preventDefault();  

    } else { 

        // AJAX Code To submit Form.
        $.ajax({
            type: "POST",
            url: "process.php",
            data: dataString,
            cache: false,
            success: function(result){
            console.log(dataString);
            alert('success');

            }
        });
    }
    return false;

});

这是位于 process.php 中的 php

include "config.php";

$patientfirstname                = htmlspecialchars($_POST['message_first_name']);
$patientlastname                 = htmlspecialchars($_POST['message_last_name']);
$patientcontactnumber            = htmlspecialchars($_POST['message_phone']);

        $conn = mysqli_connect($servername, $username, $password, $dbname);
        // Check connection
        if (!$conn) {
            die("Connection failed: " . mysqli_connect_error());
        }

        $sql = "INSERT INTO data_table (firstname, lastname, phonenumber ) VALUES ('$patientfirstname', '$patientlastname', '$patientcontactnumber')";

        if (mysqli_query($conn, $sql)) {
            echo "New record created successfully";
        } else {
            echo "Error: " . $sql . "<br>" . mysqli_error($conn);
        }

        mysqli_close($conn);

Answer 1

您必须将数据作为对象传递，而不是作为 dataString。

$("#formAppointment").submit(function(e) {
    e.preventDefault();
    var firstname = $("#appointmentFirstName").val();
    var lastname = $('#appointmentLastName').val();
    var phone = $('#appointmentPhone').val();
    // var dataString = 'message_first_name=' + firstname + '&message_last_name=' + lastname + '&message_phone=' + phone;
    var data = {
        "message_first_name": firstname,
        "message_last_name": lastname,
        "message_phone": phone,
    }   

    if (firstname.trim() == "" || lastname.trim() == "" || phone.trim() == "") {    
        alert('missing information');     
    } else {    
        // AJAX Code To submit Form.
        $.ajax({
            type: "POST",
            url: "process.php",
            data: data,
            cache: false,
            success: function(result) {
                console.log(result);
                alert('success');    
            }
        });
    }
});

注意：您在代码中缺少email 和message。所以if(firstname.trim() == "" || lastname.trim() == "" || email.trim() == "" || message.trim() == "")这行可能会报错，js会跳过剩余代码的执行