php 用于在PHP中提交AJAX表单的Jquery Ajax Post示例

Posted 2021-05-04

<form id="myForm" action="" method="POST" autocomplete="off">
    <div id="myFormMessage"></div>
    <div>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" placeholder="Name">
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

const $myForm = $('#myForm');
const $myFormMessage = $('#myFormMessage').hide();

$myForm.submit(function(e) {

    // prevent default action
    e.preventDefault();

    // get values
    const name = $myForm.find("input[name='name']").val().trim();

    // validations
    let error = false;
    let errorMessages = [];
    if( (name == "") ) {
        error = true;
        errorMessages.push("Name field is required!");
    } 

    if( error == false ) {
        // post method
        $.post("./includes/ajax-form.php", { // form submission (pass vars to PHP)
            name: name
        },
        function(data, status){
            alert("Data: " + data + "\nStatus: " + status);
            if( status == 'success' ) {
                $myForm[0].reset(); // clear form fields
                $myFormMessage.html("<span style='color: green;'>Message sent!</span>").fadeIn().delay(3000).fadeOut(); // success message
            }
        });
    } else {
        let messages = errorMessages.values(); // get all values in array
        let validationErrors = "";
        for (let message of messages) {
            validationErrors += message + " "; // concat of all errors
        }
        $myFormMessage.html("<span style='color: red;'>" + validationErrors + "</span>").fadeIn(); // error message
    }

});

<?php 

$name = $_POST['name'];
echo "My name is $name";