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

Question

I'm currently making a site on Wordpress and need a form to be submitted via ajax is it possible to do this without using Wordpress functions? My current code has no errors and returns a success message without updating the database. I don't understand why it's not working please have a look at my simplified version -

This is the form 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>

This is the 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;

});

This is the php located in process.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

You have to pass data as object, not as 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');    
            }
        });
    }
});

NOTE: You are missing email and message in the code. So the line if(firstname.trim() == "" || lastname.trim() == "" || email.trim() == "" || message.trim() == "") may raise some errors and js skips the execution of remaining code