Φόρμα AJAX σε καθαρή JavaScript χωρίς jQuery

Απλός τρόπος για να δημιουργήσετε μια φόρμα AJAX χρησιμοποιώντας Pure JavaScript χωρίς jQuery. Εκμάθηση φόρμας AJAX & παράδειγμα, ζωντανή επίδειξη & παράδειγμα λήψης.

Πώς να δημιουργήσετε μια φόρμα AJAX χωρίς jQuery

Εμείς πρέπει να XMLHttpRequest() τάξη και FormData() τάξη, με κάποιες λειτουργίες. Θα δημιουργήσουμε μια φόρμα AJAX με εύκολο τρόπο με παράδειγμα.

Ζωντανή επίδειξη και λήψη

Δοκιμάστε ζωντανή επίδειξηή Κατεβάστε το παράδειγμα.

Δημιουργήστε μια φόρμα AJAX

Λειτουργία JavaScript:

/*
    AJAX in Pure JavaScript, without jQuery.
    Written by Qassim Hassan | https://wp-time.com/ajax-form-pure-javascript-without-jquery/
*/

/* AJAX Function */
function AJAXform( formID, buttonID, resultID, formMethod = 'post' ){
    var selectForm = document.getElementById(formID); // Select the form by ID.
    var selectButton = document.getElementById(buttonID); // Select the button by ID.
    var selectResult = document.getElementById(resultID); // Select result element by ID.
    var formAction = document.getElementById(formID).getAttribute('action'); // Get the form action.
    var formInputs = document.getElementById(formID).querySelectorAll("input"); // Get the form inputs.

    function XMLhttp(){
        var httpRequest = new XMLHttpRequest();
        var formData = new FormData();

        for( var i=0; i < formInputs.length; i++ ){
            formData.append(formInputs[i].name, formInputs[i].value); // Add all inputs inside formData().
        }

        httpRequest.onreadystatechange = function(){
            if ( this.readyState == 4 && this.status == 200 ) {
                selectResult.innerHTML = this.responseText; // Display the result inside result element.
            }
        };

        httpRequest.open(formMethod, formAction);
        httpRequest.send(formData);
    }

    selectButton.onclick = function(){ // If clicked on the button.
        XMLhttp();
    }

    selectForm.onsubmit = function(){ // Prevent page refresh
        return false;
    }
}

Φόρμα HTML:

<form action="form.php" id="my-form">
    <input type="text" name="some-name" value="">
    <input type="submit" name="submit" value="Send me!" id="my-button">
</form>
<div id="my-result"></div>

αρχείο form.php:

<?php
    if( isset($_POST['some-name']) and !empty($_POST['some-name']) ){
        echo $_POST['some-name'];
        exit();
    }
    else{
        echo 'Please enter your name!';
        exit();
    }
?>

Τώρα προσθέστε αυτόν τον κώδικα στη σελίδα HTML ή στο αρχείο JavaScript:

<script type="text/javascript">
    /* Usage */
    window.onload = function (){
        AJAXform( 'my-form', 'my-button', 'my-result', 'post' );
    };
</script>

Παράμετροι: AJAXform(‚Το αναγνωριστικό της φόρμας σας„,“κουμπί-αναγνωριστικό„,“αποτέλεσμα-στοιχείο-αναγνωριστικό„,“Θέση ή παίρνω μέθοδος‘);

Δείτε περισσότερα μαθήματα AJAX.