Η μέθοδος load() του jQuery AJAX

Η μέθοδος load() του jQuery

Η μέθοδος load() του jQuery είναι μια απλή αλλά ισχυρή μέθοδος AJAX.

Η μέθοδος load() φορτώνει δεδομένα από τον διακομιστή και εμπλέκει τα επιστρεφόμενα δεδομένα στο επιλεγμένο στοιχείο.

Γλώσσα:

$}}αναζητητή).load(URL,data,callback);

Απαιτητική URL Παράμετρος καθορίζει το URL που θέλετε να φορτώσετε.

Επιλογής data Παράμετρος καθορίζει τη συλλογή των κλειδιών/τιμών των ερωτηματικών που θα σταλούν μαζί με την αίτηση.

Επιλογής callback Οι παραμέτρους είναι το όνομα της συνάρτησης που θα εκτελεστεί μετά την ολοκλήρωση της μεθόδου load().

Το περιεχόμενο του αρχείου παραδείγματος ("demo_test.txt") είναι το εξής:

<h2>jQuery και AJAX είναι ΧΑΡΗΤΗΡΙΚΟ!!!</h2>
<p id="p1">Αυτό είναι κάποιο κείμενο σε ένα παραίτημα.</p>

Ο παρακάτω παράδειγμα φορτώνει το περιεχόμενο του αρχείου "demo_test.txt" στο καθορισμένο στοιχείο <div>:

Συμβουλή

$("#div1").load("demo_test.txt");

Προσπαθήστε από μόνοι σας

Μπορείτε επίσης να προσθέσετε το jQuery selector ως παράμετρο στο URL.

Ο παρακάτω παράδειγμα φορτώνει το περιεχόμενο του στοιχείου με id="p1" από το αρχείο "demo_test.txt" στο καθορισμένο στοιχείο <div>:

Παράδειγμα

$("#div1").load("demo_test.txt #p1");

Προσπαθήστε από μόνοι σας

Ο επιλογής callback παράμετρος καθορίζει τη συνάρτηση που θα εκτελεστεί μετά την ολοκλήρωση της μεθόδου load(). Η συνάρτηση callback μπορεί να ρυθμίσει διαφορετικές παραμέτρους:

  • responseTxt - Περιέχει το περιεχόμενο της κλήσης όταν επιτυγχάνεται
  • statusTXT - Περιέχει την κατάσταση της κλήσης
  • xhr - Περιέχει το αντικείμενο XMLHttpRequest

Ο παρακάτω παράδειγμα θα εμφανίσει ένα παράθυρο προειδοποίησης μετά την ολοκλήρωση της μεθόδου load(). Αν η μέθοδος load() επιτύχει, θα εμφανιστεί το "Επιτυχής φόρτωση περιεχομένου εξωτερικού!" και αν αποτύχει, θα εμφανιστεί το μήνυμα σφάλματος:

Παράδειγμα

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("Επιτυχής φόρτωση περιεχομένου εξωτερικού!");
    if(statusTxt=="error")
      alert("Σφάλμα: "+xhr.status+": "+xhr.statusText);
  });
});

Προσπαθήστε από μόνοι σας

Περιήγηση του χειρογράφου jQuery AJAX

Για πλήρη αναφορά των μεθόδων AJAX, παρακαλώ επισκεφθείτε το Περιήγηση του χειρογράφου jQuery AJAX。