jQuery μέθοδος ajax - φόρτωση()
Παράδειγμα
Αλλάξτε τον κείμενο του στοιχείου div χρησιμοποιώντας αίτημα AJAX:
$("button").κλικ(function(){});
$("div").φόρτωση('demo_ajax_load.txt');
});
Μπορείς να βρεις περισσότερες TIY παραδείγματα στο κάτω μέρος της σελίδας
Ορισμός και χρήση
η μέθοδος φόρτωσης() φορτώνει δεδομένα από τον διακομιστή μέσω αιτήματος AJAX και τοποθετεί τα επιστρεφόμενα δεδομένα στο καθορισμένο στοιχείο.
Σημείωση:υπάρχει επίσης μια ονομαζόμενη φόρτωση του jQuery εγεννήσειςμεθόδους. Ποια θα καλέσεις, εξαρτάται από τις παράμετροι.
γλώσσα
φόρτωση(url,data,λειτουργία(response,status,xhr))
| παράμετροι | περιγραφή |
|---|---|
| url | Καθορίζει τον URL στον οποίο θα σταλεί η αίτηση. |
| data | Προαιρετικό. Καθορίζει τα δεδομένα που θα αποσταλούν στον διακομιστή. |
| function(response,status,xhr) |
Προαιρετικό. Καθορίζει τη συνάρτηση που θα εκτελεστεί όταν ολοκληρωθεί η αίτηση. Προσθετικά παραμέτρα:
|
Περιγραφή
Αυτή η μέθοδος είναι η πιο απλή για την απόκτηση δεδομένων από τον διακομιστή. Είναι σχεδόν ίση με το $.get(url, data, success), αλλά δεν είναι μια καθολική συνάρτηση και έχει μια εξωτερική συνάρτηση ανατροφοδότησης. Όταν εντοπίζεται μια επιτυχημένη απάντηση (π.χ., όταν το textStatus είναι "success" ή "notmodified"), η .load() θα ορίσει το περιεχόμενο του στοιχείου που ταιριάζει ως την επιστρεφόμενη δεδομένα. Αυτό σημαίνει ότι η πλειοψηφία των χρήσεων αυτής της μεθόδου θα είναι πολύ απλή:
$("#result").load("ajax/test.html");
Αν παρέχεται μια συνάρτηση ανατροφοδότησης, αυτή θα εκτελεστεί μετά την ολοκλήρωση της επεξεργασίας:
$("#result").load("ajax/test.html", function() {
alert("Εκτέλεση φόρτωσης.");
});
Στα δύο παραπάνω παραδείγματα, αν το τρέχον έγγραφο δεν περιέχει το ID "result", η μέθοδος .load() δεν θα εκτελεστεί.
Αν τα δεδομένα που παρέχονται είναι αντικείμενο, χρησιμοποιείται η μέθοδος POST; σε αντίθετη περίπτωση, χρησιμοποιείται η μέθοδος GET.
Φόρτωση απότομων σελίδων
Η μέθοδος .load(), διαφορετική από το $.get(), επιτρέπει να καθορίσουμε ένα μέρος του απομακρυσμένου εγγράφου που θέλουμε να εισάγουμε. Αυτό επιτυγχάνεται μέσω μιας ειδικής σύνταξης του παραμέτρου url. Αν η αλφαριθμητική αλυσίδα περιέχει έναν ή περισσότερους κενά, η αλφαριθμητική αλυσίδα που ακολουθεί τον πρώτο κενά είναι ο jQuery επιλογέας που καθορίζει το περιεχόμενο που θα φορτωθεί.
Μπορούμε να τροποποιήσουμε τον παραπάνω παράδειγμα, ώστε να χρησιμοποιήσουμε κάποιο μέρος του αποκτηθέντος εγγράφου:
$("#result").load("ajax/test.html #container");
Αν εκτελέσει αυτή τη μεθόδο, θα επιστρέψει το περιεχόμενο του ajax/test.html, αλλά μετά, το jQuery θα αναλύσει το επιστρεφόμενο έγγραφο για να βρει στοιχεία με το ID κελιάς. Το στοιχείο αυτό, μαζί με το περιεχόμενό του, θα εισαχθεί στο στοιχείο με το ID αποτελεσμάτων, η υπόλοιπη μέρος του επιστρεφόμενου εγγράφου θα απορριφθεί.
Το jQuery χρησιμοποιεί την ιδιότητα .innerHTML του προγράμματος περιήγησης για να αναλύσει το επανειλημμένα αποσπασμένο έγγραφο και να το εισάγει στο τρέχον έγγραφο. Κατά τη διάρκεια αυτού του διαδικασμού, ο προγραμματιστής συχνά αποκλείει στοιχεία από το έγγραφο, όπως τα στοιχεία <html>, <title> ή <head>. Το αποτέλεσμα είναι ότι τα στοιχεία που επανειλημμένα αποσπασμένα από το .load() μπορεί να μην είναι πλήρως ταυτόσημα με τα έγγραφα που αποσπασμένα από τον προγραμματιστή του προγράμματος περιήγησης.
Σημείωση:Άρης ασφάλειας του προγράμματος περιήγησης, οι περισσότεροι αιτήσεις "Ajax" ακολουθούν την πολιτική του ίδιου τόπου; Οι αιτήσεις δεν μπορούν να επέλθουν επιτυχώς δεδομένα από διαφορετικούς τόπους, υποτοποθεσίες ή πρωτόκολλα.
Περισσότερα παραδείγματα
Παράδειγμα 1
Φόρτωση περιεχομένου αρχείου feeds.html:
$("#feeds").load("feeds.html");
Παράδειγμα 2
Παρόμοιο με το παραπάνω παράδειγμα, αλλά στείλτε επιπλέον παραμέτρους με μορφή POST και εμφανίστε μήνυμα επιτυχίας όταν το στείλετε:
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
Παράδειγμα 3
Φόρτωση του τμήματος πλοήγησης πλευράς άρθρου σε μια μη οργανωμένη λίστα:
Κώδικας HTML:
<b>Σύνδεσμοι jQuery:</b> <ul id="links"></ul>
jQuery κώδικας:
$("#links").load("/Main_Page #p-Getting-Started li");
Περισσότερες TIY παραδείγματα
- Δημιουργία αιτήματος AJAX και στείλτε δεδομένα μέσω αυτού του αιτήματος
- Πώς να στείλετε δεδομένα μέσω αιτήματος AJAX χρησιμοποιώντας την παράμετρο data (το παράδειγμα αυτό εξηγείται στο μάθημα AJAX).
- Δημιουργία αιτήματος AJAX και χρήση callback function
- Πώς να χειριστείτε τα δεδομένα αποτελέσματος από το αίτημα AJAX.
- Δημιουργία αιτήματος AJAX με σφάλματα
- Πώς να χρησιμοποιήσετε τον παράμετρο function για να χειριστείτε τα σφάλματα σε αιτήματα AJAX (χρησιμοποιώντας παραμέτρους XMLHttpRequest).
