Για αρκετό καιρό, πολλοί ιστότοποι έχουν δυναμικές σελίδες, δηλαδή ενημερώνονται χωρίς επαναφόρτωση. Αυτό επιτυγχάνεται με την κλήση του διακομιστή μέσω JavaScript, στις περισσότερες περιπτώσεις, αιτημάτων POST και GET. Και σχεδόν πάντα τέτοιοι ιστότοποι χρησιμοποιούν τον Ajax για αυτό. Και δεν γνωρίζουν όλοι (δυστυχώς) ότι το Ajax δεν είναι μια ξεχωριστή γλώσσα, αλλά απλώς μια βιβλιοθήκη JavaScript. Συμπέρασμα: Ο Ajax είναι απλώς ένας βολικός τρόπος αποστολής αιτημάτων POST, αλλά όλα αυτά μπορούν να γίνουν χωρίς τη βοήθειά του. Αυτός είναι ο τρόπος αποστολής αιτημάτων POST μέσω JavaScript χωρίς Ajax, θα καλύψω σε αυτό το άρθρο.

Τώρα θα λύσουμε ένα κλασικό πρόβλημα - το άθροισμα δύο αριθμών που καθορίζονται από τον χρήστη. Δηλαδή, εγώ και εσύ μετράμε 2 αριθμούς από πεδία κειμένου, τους στέλνουμε στον διακομιστή, λαμβάνουμε απάντηση και τους εμφανίζουμε στη σελίδα. Και όλα αυτά χωρίς να φορτώσετε ξανά τη σελίδα.

Ας ξεκινήσουμε με κάτι απλό: τη σύνταξη κώδικα PHP:

Όλα εδώ είναι στοιχειώδη, οπότε δεν θα σχολιάσω καν. Τώρα έρχεται το πιο δύσκολο κομμάτι - η πλευρά του πελάτη:

/* Αυτή η συνάρτηση δημιουργεί ένα αντικείμενο XMLHTTP μεταξύ του προγράμματος περιήγησης */
συνάρτηση getXmlHttp() (
var xmlhttp;
δοκιμάστε (
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
) πιάσε (ε) (
δοκιμάστε (
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
) πιάσε (Ε) (
xmlhttp = false;
}
}
εάν (!xmlhttp && typeof XMLHttpRequest!="undefined") (
xmlhttp = new XMLHttpRequest();
}
επιστροφή xmlhttp;
}
συνάρτηση summa() (
var a = document.getElementById("a").value; // Διαβάστε την τιμή του α
var b = document.getElementById("b").value; // Διαβάστε την τιμή του b
var xmlhttp = getXmlHttp(); // Δημιουργία αντικειμένου XMLHTTP
xmlhttp.open("POST", "test.php", true); // Ανοίξτε μια ασύγχρονη σύνδεση
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // Αποστολή κωδικοποίησης
xmlhttp.send("a=" + encodeURIcomponent(a) + "&b=" + encodeURIcomponent(b)); // Αποστολή αιτήματος POST
xmlhttp.onreadystatechange = function() ( // Αναμονή για απάντηση από τον διακομιστή
if (xmlhttp.readyState == 4) ( // Έφτασε η απάντηση
if(xmlhttp.status == 200) ( // Ο διακομιστής επέστρεψε τον κωδικό 200 (που είναι καλό)
document.getElementById("summa").innerHTML = xmlhttp.responseText; // Εκτυπώστε την απόκριση διακομιστή
}
}
};
}

Το ποσό είναι:

Δεν θα σχολιάσω τον κώδικα HTML, αφού είναι απολύτως διαφανής. Θα προσθέσω όμως λίγο στο JavaScript, παρά τα αναλυτικά σχόλια. Πρώτον, η συνάρτηση getXmlHttp() είναι γενική. Μπορείτε να το αντιγράψετε με ασφάλεια στα σενάρια σας. Το καθήκον του είναι να επιστρέψει ένα τέτοιο XMLHTTP έτσι ώστε να λειτουργεί σε οποιοδήποτε πρόγραμμα περιήγησης. Επειδή η πιο δημοφιλής επιλογή είναι η νέα XMLHttpRequest() , ωστόσο, δεν λειτουργεί στον IE6 για παράδειγμα. Άλλες επιλογές δεν είναι επίσης καθολικές, επομένως εδώ επιλέγουμε απλώς μια επιλογή εργασίας για οποιοδήποτε πρόγραμμα περιήγησης.

Έγραψα επίσης στα σχόλια για "ασύγχρονη εργασία". Υπάρχει επίσης μια σύγχρονη επιλογή. Η μόνη διαφορά είναι ότι στη σύγχρονη λειτουργία, έως ότου ληφθεί μια απάντηση από τον διακομιστή, το πρόγραμμα περιήγησης δεν θα λειτουργήσει, απλά θα κολλήσει. Είναι δύσκολο για μένα να καταλήξω σε μια εργασία όπου αυτό είναι απαραίτητο, οπότε έγραψα αμέσως μια ασύγχρονη έκδοση. Λειτουργεί ως εξής: στέλνουμε ένα αίτημα και περιμένουμε απάντηση, αλλά το πρόγραμμα περιήγησης δεν κολλάει. Και όταν φτάσει η απάντηση (xmlhttp.readyState == 4 ), επεξεργαζόμαστε αμέσως την απάντηση. Αυτή είναι η ασύγχρονη έκδοση της εργασίας, είναι λίγο πιο περίπλοκη, αλλά είναι η μόνη που πρέπει να χρησιμοποιηθεί (εκτός από πολύ σπάνιες περιπτώσεις).

Έτσι αποστέλλονται τα αιτήματα POST μέσω JavaScript. Όπως μπορείτε να δείτε, δεν χρειαζόμασταν καθόλου τον Άγιαξ. Και συνιστώ ανεπιφύλακτα ότι εάν έχετε μόνο μερικά αιτήματα για ολόκληρο τον ιστότοπο, μην σκεφτείτε καν να χρησιμοποιήσετε αυτήν τη βιβλιοθήκη βαρέως τύπου, αλλά χρησιμοποιήστε το υλικό σε αυτό το άρθρο.

Αίτημα GET

Ένα αίτημα GET ή POST αποστέλλεται μέσω ενός αντικειμένου XMLHttpRequest (ονομάζεται επίσης XHR για συντομία).

// εκτελέστε τον κώδικα όταν φτάσει η απάντηση από το αίτημα GET // κωδικός όταν το αίτημα είναι επιτυχές // Αποστολή αιτήματος GET ajax.open("GET" , "/handler.php" ); ajax.setRequestHeader("X-Requested-With" , "XMLHttpRequest" ); ajax.send();

Αξίζει να δώσετε προσοχή στη μέθοδο setRequestHeader(). Αυτή η μέθοδος λέει στον διακομιστή ότι έχει σταλεί ένα αίτημα Ajax. Πολλά πλαίσια, όπως το jQuery, ορίζουν αυτήν την κεφαλίδα από προεπιλογή. Εάν δεν ορίσετε αυτήν την κεφαλίδα, ο διακομιστής ενδέχεται να μην εντοπίσει το αίτημα Ajax και να επιστρέψει ένα σφάλμα.

Μπορείτε να στείλετε μόνο ένα αίτημα GET ή POST στον τρέχοντα τομέα του ιστότοπου (λόγω του κανόνα περιορισμού τομέα, που ονομάζεται επίσης "Πολιτική ίδιας προέλευσης").

Η μέθοδος open() μπορεί επίσης να λάβει μια τρίτη παράμετρο, false , η οποία κάνει τα αιτήματα σύγχρονα (δηλαδή, ο κώδικας σταματά να εκτελείται μέχρι να φτάσει μια απάντηση από τον διακομιστή). Αυτή η μέθοδος θεωρείται ότι δεν συνιστάται για χρήση, επειδή μπορεί να επιβραδύνει τη JavaScript. Το πρόγραμμα περιήγησης Chrome εμφανίζει επίσης μια προειδοποίηση στην κονσόλα όταν χρησιμοποιείται αυτή η επιλογή.

Αίτημα POST

Πρώτα πρέπει να καθορίσετε ποια δεδομένα θέλετε να στείλετε:

// Παλαιά προγράμματα περιήγησης var params = "lang=JavaScript&framework=jQuery" ; // Σύγχρονα προγράμματα περιήγησης var params = new FormData(); params.append("lang" , "JavaScript" ); params.append("framework" , "jQuery" );

Το αντικείμενο FormData() υποστηρίζεται από σύγχρονα προγράμματα περιήγησης (υποστήριξη IE από τον IE 10).

Μπορείτε επίσης να μεταβιβάσετε ένα στοιχείο φόρμας στο FormData() του οποίου τα πεδία θα περάσουν στο αίτημα POST.

var params = new FormData(document .getElementById("form-name" )); // 1η μέθοδος var params = new FormData(document .forms["form-name" ]); // 2η μέθοδος

Οι δημιουργημένες παράμετροι μπορούν να περάσουν μέσω της μεθόδου send().

var ajax = new XMLHttpRequest(); // εκτελέστε τον κώδικα όταν φτάσει η απάντηση από το αίτημα POST ajax.onreadystatechange = συνάρτηση () ( if (ajax.readyState == 4 ) ( if (ajax.status == 200 || ajax.status == 304 ) ( / / κωδικός για επιτυχές αίτημα ajax.response; // απάντηση διακομιστή ) else ( // κωδικός για σφάλμα ) ) ) // Αποστολή αιτήματος POST ajax.open("POST " , "/ajax-handler.php" ); ajax.setRequestHeader("X-Requested-With" , "XMLHttpRequest" ); ajax.send(params); Ενεργοποιήστε την JavaScript για να δείτε τον ορισμό και την εφαρμογή jQuery AJAX

Η συνάρτηση jQuery $.post() σάς επιτρέπει να κάνετε λήψη δεδομένων από τον διακομιστή χρησιμοποιώντας ένα αίτημα HTTP χρησιμοποιώντας τη μέθοδο POST. Για λήψη δεδομένων χρησιμοποιώντας τη μέθοδο αιτήματος HTTP ΠΑΙΡΝΩμπορείτε να χρησιμοποιήσετε τη συνάρτηση jQuery $.get().

Λάβετε υπόψη ότι η συνάρτηση $.post() είναι μια συντομευμένη έκδοση της συνάρτησης $.ajax() με τις ακόλουθες παραμέτρους:

$.ajax(( type : "POST " // Μέθοδος HTTP που χρησιμοποιείται για τη διεύθυνση url αιτήματος : "url", // μια συμβολοσειρά που περιέχει τη διεύθυνση URL στην οποία αποστέλλεται το αίτημα δεδομένα : δεδομένα, // δεδομένα που θα σταλούν στο επιτυχία διακομιστή : επιτυχία , // συνάρτηση επανάκλησης που καλείται εάν το αίτημα AJAX ολοκληρωθεί με επιτυχία dataType : "dataType" // ο τύπος δεδομένων που περιμένετε να λάβετε από τον διακομιστή ) );

Μέθοδος ΠΑΙΡΝΩΔιαφορετικός ΘΕΣΗΌταν η φόρμα υποβάλλεται, μεταβιβάζει τις συλλεγμένες πληροφορίες ως μέρος της διεύθυνσης URL:

Url?name=value&name=value // Η μέθοδος GET χρησιμοποιεί ζεύγη ονόματος = τιμής

Κατά την αποστολή δεδομένων χρησιμοποιώντας τη μέθοδο ΘΕΣΗτα δεδομένα μεταδίδονται με τέτοιο τρόπο ώστε ο χρήστης να μην βλέπει πλέον τα δεδομένα που αποστέλλονται στον χειριστή φόρμας (προσθέτει δεδομένα φόρμας στο σώμα του αιτήματος http, τα οποία δεν εμφανίζονται στη διεύθυνση URL).

Δώστε προσοχή σε ορισμένες αποχρώσεις όταν εργάζεστε με μεθόδους HTTP ΠΑΙΡΝΩΚαι ΘΕΣΗ:

• Μέθοδος ΠΑΙΡΝΩπεριορίζει τον όγκο των πληροφοριών που μεταδίδονται στη διεύθυνση URL (περίπου 3000 χαρακτήρες), τη μέθοδο ΘΕΣΗδεν έχει τέτοιους περιορισμούς.
• Μην χρησιμοποιείτε ποτέ τη μέθοδο ΠΑΙΡΝΩ, εάν χρειάζεται να μεταφέρετε ευαίσθητα δεδομένα (για παράδειγμα, τον κωδικό πρόσβασης του χρήστη, καθώς θα μεταφερθεί στη συμβολοσειρά URL - σε καθαρό κείμενο).
• Η σελίδα που δημιουργείται από τη μέθοδο ΠΑΙΡΝΩ, μπορείτε να το επισημάνετε με ένα σελιδοδείκτη (η διεύθυνση σελίδας θα είναι πάντα μοναδική) και τη σελίδα που δημιουργείται από τη μέθοδο ΘΕΣΗΑυτό δεν είναι δυνατό, καθώς η διεύθυνση της σελίδας δεν αλλάζει (δεν μεταδίδονται δεδομένα στη διεύθυνση URL).
• Σημειώστε ότι χρησιμοποιώντας τη μέθοδο ΠΑΙΡΝΩΜπορείτε να μεταφέρετε δεδομένα όχι μέσω μιας φόρμας, αλλά μέσω της διεύθυνσης URL της σελίδας.

Σύνταξη jQuery: Σύνταξη 1.0: $.post( url, δεδομένα, επιτυχία, Τύπος δεδομένων); url- Χορδή δεδομένα- PlainObject ή String επιτυχία-Function(PlainObject δεδομένα,Σειρά textStatus,jqXHR jqXHR) Τύπος δεδομένων- Σύνταξη συμβολοσειράς 1.12/2.2: $.post(( Ρυθμίσεις) ); // Οι παράμετροι αιτήματος περνούν στο αντικείμενο Ρυθμίσεις-PlainObject

Οι σελίδες που φορτώνονται από τη συνάρτηση $.post() δεν αποθηκεύονται ποτέ προσωρινά, γι' αυτό οι τιμές της κρυφής μνήμης (καθορίζει εάν οι σελίδες θα αποθηκευτούν στην προσωρινή μνήμη, ορίζεται από προεπιλογή σε true ) και ifModified (ελέγχει τα πεδία κεφαλίδας Last-Modified, από προεπιλογή false ) οι παράμετροι της συνάρτησης jQuery .ajaxSetup() (ορίζει τις προεπιλεγμένες τιμές για μελλοντικά αιτήματα ΑΪΑΣ) δεν θα επηρεάσει αυτά τα ερωτήματα.

Προστέθηκε στις τιμές παραμέτρων jQuery 1.0 Περιγραφή παραμέτρου

url	Μια γραμμή που περιέχει URLδιεύθυνση στην οποία αποστέλλεται ΑΪΑΣαίτηση. Απαιτούμενη παράμετρος.
δεδομένα	Ένα αντικείμενο ή συμβολοσειρά που θα σταλεί στον διακομιστή μαζί με ΑΪΑΣαίτηση.
επιτυχία	Μια συνάρτηση επανάκλησης που καλείται εάν ΑΪΑΣτο αίτημα θα ολοκληρωθεί με επιτυχία. Προαιρετική παράμετρος. Η συνάρτηση δέχεται τις ακόλουθες παραμέτρους: δεδομένα- δεδομένα που επιστρέφονται από τον διακομιστή. textStatus- μια συμβολοσειρά που περιγράφει την κατάσταση του αιτήματος. jqXHR- αντικείμενο jqXHR (μέχρι την έκδοση jQuery 1.4.xαντικείμενο XMLHttpRequest).
Τύπος δεδομένων	Καθορίζει τον τύπο δεδομένων που περιμένετε να λάβετε από τον διακομιστή. Εάν ο τύπος δεδομένων δεν έχει καθοριστεί, τότε το jQuery θα προσπαθήσει να τον προσδιορίσει με βάση τον τύπο MIME από την απάντηση ( XMLτύπος ΜΙΜΟΣθα οδηγήσει σε XML, από το jQuery 1.4 jsonθα δώσει ένα αντικείμενο JavaScript, γραφήθα εκτελέσει το σενάριο και όλα τα άλλα θα επιστραφούν ως συμβολοσειρά). Προαιρετική παράμετρος. Διαθέσιμοι τύποι (το αποτέλεσμα μεταβιβάζεται ως το πρώτο όρισμα στη συνάρτηση επανάκλησης επιτυχίας): "xml" - επιστρέφει XMLέγγραφο που μπορεί να αποδοθεί χρησιμοποιώντας jQuery. "html" - επιστρέφει HTMLως απλό κείμενο, οι ετικέτες θα υποστούν επεξεργασία και θα εκτελεστούν μόλις εισαχθούν στο μοντέλο αντικειμένου εγγράφου ( DOM). "script" - αξιολογεί την απάντηση ως JavaScriptκαι το επιστρέφει ως απλό κείμενο. Απενεργοποιεί την προσωρινή αποθήκευση προσθέτοντας την παράμετρο _= στη συμβολοσειρά ερωτήματος, ακόμα κι αν η παράμετρος της κρυφής μνήμης είναι αληθής. Αυτό θα αλλάξει τη μέθοδο ΘΕΣΗ V ΠΑΙΡΝΩγια αιτήματα μεταξύ τομέων. "json" - αξιολογεί την απάντηση ως JSONκαι επιστρέφει ένα αντικείμενο JavaScript. Cross-domain "json"τα αιτήματα μετατρέπονται σε "jsonp", εάν το jsonp δεν καθορίζεται στις παραμέτρους αιτήματος: false . Δεδομένα JSONαναλύονται με αυστηρή σειρά και πρέπει να συμμορφώνονται με τη γενικά αποδεκτή μορφή, τυχόν λανθασμένη JSONαπορρίπτεται και γίνεται λάθος. Από το jQuery 1.9, μια κενή απάντηση δεν γίνεται αποδεκτή· ο διακομιστής πρέπει να επιστρέψει NULL ή () ως απάντηση. "jsonp" - φορτώνει δεδομένα στη μορφή JSON, χρησιμοποιώντας τη μορφή λήψης JSONP. Προσθέτει μια επιπλέον παράμετρο "?callback=? " στο τέλος URLδιευθύνσεις για τον καθορισμό του ονόματος της συνάρτησης χειριστή. Απενεργοποιεί την προσωρινή αποθήκευση προσθέτοντας την παράμετρο _= στο URLδιεύθυνση, ακόμα κι αν η παράμετρος της κρυφής μνήμης είναι αληθής. Το "κείμενο" είναι μια κανονική συμβολοσειρά κειμένου. πολλαπλές τιμές - οι τιμές χωρίζονται με ένα κενό. Από την έκδοση 1.5, το jQuery μπορεί να μετατρέψει τον τύπο δεδομένων που λαμβάνεται στο Content-Type της κεφαλίδας στον τύπο δεδομένων που χρειάζεστε. Για παράδειγμα, εάν θέλετε μια απάντηση κειμένου να ερμηνεύεται ως XML, χρησιμοποιήστε "text XML" για αυτόν τον τύπο δεδομένων. Μπορείτε επίσης να κάνετε ένα αίτημα JSONP, να το λάβετε ως κείμενο και να το ερμηνεύσετε ως XML: "jsonp text XML" . Η ακόλουθη γραμμή θα κάνει το ίδιο: "jsonp XML" , το jQuery θα προσπαθήσει να κάνει μετατροπή από JSONP V XML, μετά από μια ανεπιτυχή προσπάθεια θα προσπαθήσει να μετατρέψει JSONPστο κείμενο και μετά από το κείμενο στο XML.

Παράδειγμα χρήσης Παράδειγμα χρήσης της συνάρτησης jQuery $.post() $(document).ready(function ()( $("form ").submit(function ()( var formData = $(this ).serialize(); / / δημιουργήστε μια μεταβλητή που περιέχει ένα κωδικοποιημένο σύνολο στοιχείων φόρμας ως συμβολοσειρά $.post("user.php", φόρμαΔεδομένα, λειτουργία ( δεδομένα) ( // μεταφορά και λήψη δεδομένων από τον διακομιστή χρησιμοποιώντας αίτημα HTTP χρησιμοποιώντας τη μέθοδο POST $("div ").html( δεδομένα) // εισαγωγή δεδομένων που λαμβάνονται από τον διακομιστή στο στοιχείο ) ) ) ); ) );

Σε αυτό το παράδειγμα δεσμεύουμε JavaScriptΕργαλείο χειρισμού συμβάντων "υποβολή" (χειριστής υποβολής φόρμας), το οποίο ενεργοποιείται τη στιγμή που υποβάλλεται η φόρμα (στην περίπτωσή μας, συμπληρώνεται) όταν πατηθεί ένα στοιχείο με τον τύπο υποβολής (κουμπί για την υποβολή της φόρμας).

Επιπλέον, δημιουργούμε μια μεταβλητή που περιέχει ένα κωδικοποιημένο σύνολο στοιχείων φόρμας ως συμβολοσειρά - το αποτέλεσμα της εκτέλεσης της μεθόδου .serialize(). Μετά από αυτό, χρησιμοποιώντας τη συνάρτηση jQuery $.post(), εκτελούμε ένα ασύγχρονο αίτημα AJAX με τις ακόλουθες παραμέτρους:

• url είναι το αρχείο στο οποίο έχουμε πρόσβαση ("user.php"), περιέχει τον ακόλουθο κώδικα PHP: Αποτέλεσμα ("a":1,"b":2,"c":3,"d":4,"e ":5) Παράδειγμα PHP της συνάρτησης json_decode $json = "("a":1,"b":2)"; var_dump(json_decode($json, true)); $arr = json_decode($json, true); ηχώ "
  ".$arr["a"]."
  ".$arr["b"]."
  "; Πίνακας αποτελεσμάτων(5) ( ["a"] => int(1) ["b"] => int(2) ) 1 2 Παράδειγμα αιτήματος Ajax χρησιμοποιώντας τη μέθοδο POST

  Τι κάνουμε:
  Ελέγχουμε την ορθότητα των δεδομένων που αποστέλλονται (μέσω αιτήματος AJAX POST) (τα δεδομένα εισάγονται από τον χρήστη). Εάν τα δεδομένα είναι σωστά, εμφανίζουμε ένα μήνυμα. Διαφορετικά, προσθέτουμε κόκκινη επισήμανση στα πεδία. Όλα λειτουργούν ασύγχρονα, δηλαδή χωρίς επαναφόρτωση της σελίδας. Μπορείτε να χρησιμοποιήσετε αυτήν την αρχή, για παράδειγμα, για να δημιουργήσετε ένα σύστημα σχολίων που εισάγει σχόλια σε μια βάση δεδομένων.

  
  

  jQuery $(document).ready(function())( var working = false; /* Αυτή η σημαία εμποδίζει την υποβολή πολλών σχολίων: */ $("form").submit(function(e)( e.preventDefault() ; if(working) return false; working = true; $("#submit").val("Wait.."); $(".error").removeClass("error"); $.post("submit .php" ,$(this).serialize(),function(msg)( /* Στείλτε τις τιμές της φόρμας στο submit.php: */working = false; $("#submit").val("Υποβολή" ); if(msg. status) // Εάν τα δεδομένα είναι σωστά, προσθέστε ένα μήνυμα ( console.log(msg.status); $(msg.html).hide().insertBefore("form").slideDown() ; ) else ( // Εάν υπάρχουν σφάλματα , κάντε βρόχο στο αντικείμενο // msg.errors και εμφανίστε τα στη σελίδα $.each(msg.errors,function(k,v)( $("#"+k). addClass("σφάλμα"); //alert(k); )); ) ),"json"); )); )); HTML Εισαγωγή αριθμού Εισαγωγή email PHP // αποδοχή δεδομένων που λαμβάνονται μέσω ajax $arr = $_POST; $arr = $_POST; if(filter_var($arr, FILTER_VALIDATE_EMAIL) && filter_var($arr, FILTER_VALIDATE_INT)) ( echo json_encode(array("status"=>1,"html"=>"Ευχαριστούμε, τα δεδομένα σας είναι ακριβή")); // πληροφορίες που επιστράφηκαν διακομιστής ) else ( if(filter_var($arr, FILTER_VALIDATE_EMAIL) == false) ( $errors["email"] = "Παρακαλώ εισάγετε ένα όνομα."; ) if(filter_var($arr, FILTER_VALIDATE_INT) == false) ( $ errors["intt"] = "Παρακαλώ εισάγετε ένα όνομα."; ) $arr = $errors; /* Εμφάνιση μηνυμάτων σφάλματος */ echo "("status":0,"errors":".json_encode($arr ) ")";)

  Το JQuery είναι μια βιβλιοθήκη javascript της οποίας ο στόχος είναι να "γράψει λιγότερο, να κάνει περισσότερα". Το jQuery είναι εύκολο να συνδεθείτε στον ιστότοπό σας και να αρχίσετε να χρησιμοποιείτε. Το jQuery διευκολύνει πολύ τη χρήση javascript στον ιστότοπό σας.

  Το jQuery εξαλείφει πολλές γραμμές κώδικα javascript και σας επιτρέπει να εφαρμόσετε αυτές τις πολλές γραμμές με μία μόνο μέθοδο.

  Τι είναι το AJAX;

  Το AJAX είναι ασύγχρονο (δηλαδή, το πρόγραμμα περιήγησης μπορεί να κάνει ό,τι θέλει μετά την αποστολή ενός αιτήματος, όπως εμφάνιση μηνύματος σε αναμονή απάντησης, κύλιση της σελίδας κ.λπ.) JavaScript και XML. Χρησιμοποιείται για τη δημιουργία δυναμικών και γρήγορων ιστοσελίδων. Το AJAX μας επιτρέπει να ενημερώσουμε μέρος μιας ιστοσελίδας χωρίς να φορτώσουμε ξανά ολόκληρη τη σελίδα.

  Τι γίνεται με το jQuery και το AJAX;

  Ο συνδυασμός jQuery και AJAX παρέχει ισχυρή λειτουργικότητα. Με το jquery και το ajax, μπορείτε να υποβάλετε αίτημα και να λάβετε πληροφορίες σε διάφορες μορφές, όπως XML, HTML, ακόμη και απλό κείμενο. Μπορείτε να χρησιμοποιήσετε τη μορφή JSON για την ανταλλαγή δεδομένων. Μπορούμε να χρησιμοποιήσουμε τα δεδομένα που λαμβάνονται μέσω αιτήματος ajax στη σελίδα html μας.

  Το jQuery κάνει το υπάρχον πρόγραμμα περιήγησης Ajax API πιο ισχυρό και πιο εύκολο στη χρήση. Η πραγματοποίηση κλήσεων ajax με τον κανονικό τρόπο χρησιμοποιώντας τη Javascript είναι λίγο δύσκολη: αφού πρέπει να λάβετε υπόψη ότι διαφορετικά προγράμματα περιήγησης απαιτούν διαφορετικές προσεγγίσεις για τη δημιουργία του αντικειμένου XMLHttpRequest. Επιπλέον, η υποβολή δεδομένων, για παράδειγμα από φόρμες, γίνεται πιο δύσκολη εάν χρησιμοποιείτε κανονικό javascript για την κλήση ajax.

  Το jQuery παρέχει απλή και ισχυρή λειτουργικότητα που επεκτείνει τις μεθόδους AJAX της javascript και παρέχει μια πιο ευέλικτη προσέγγιση.

  Σε αυτό το σύντομο άρθρο θα σας δείξω πώς να χρησιμοποιείτε το jQuery και το AJAX σε μια απλή μορφή php. Ας ξεκινήσουμε... Για να χρησιμοποιήσουμε jQuery και AJAX θα χρειαστούμε δύο αρχεία, το πρώτο αρχείο θα περιέχει τον κώδικα html/php μέσω του οποίου θα γίνει το αίτημα ajax. Στο δεύτερο αρχείο θα επεξεργαστούμε το αίτημα ajax και θα επιστρέψουμε το αποτέλεσμα στην πρώτη σελίδα.

  Βήμα 1: Δημιουργήστε ένα αρχείο school.php και επικολλήστε τον ακόλουθο κώδικα σε αυτό:

  Στον παραπάνω κώδικα παίρνουμε το όνομα και τον αριθμό του μαθητή και χρησιμοποιώντας jquery και ajax τα στέλνουμε στο details.php.

  συνάρτηση getdetails())( var name = $("#name").val(); var rno = $("#rno").val(); $.ajax(( type: "POST", url: " λεπτομέρειες .php", δεδομένα: (fname:name, id:rno) )).done(function(result) ( $("#msg").html(" Address of Roll no " +rno +" is "+result ) ;))))

  Το όνομα σου:
  Αριθμός Ρολού:

  Βήμα 2: Δημιουργήστε το details.php και τοποθετήστε τον ακόλουθο κώδικα σε αυτό:

  Στον παραπάνω κωδικό, παίρνουμε τη διεύθυνση του μαθητή χρησιμοποιώντας τον αύξοντα αριθμό και το όνομά του.

  Για αυτό το παράδειγμα, θα χρειαστεί να δημιουργήσετε μια σχολική βάση δεδομένων και έναν πίνακα μαθητών. Ο πίνακας σπουδαστών περιέχει πεδία με ονόματα, αριθμούς σειράς και διευθύνσεις.

  Ελπίζω να βρείτε αυτό το άρθρο χρήσιμο.