תיאור:
טוען נתונים משרת ומכניס HTML שהוחזר בתוך אלמנט בהתאמה.
ארגומנטים
load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] )
הוספה בגרסה: 1.0
url
מחרוזת, מכילה URL שאליו נשלחת שאילתה.
מפה או מחרוזת שנשלחת לשרת עם הבקשה.
complete(responseText, textStatus, XMLHttpRequest) (אופציונלי)
פונקציה שמופעלת כל פעם אחרי טעינת הנתונים מוצלחת.
שיטה הזו היא דרך הפשוטה ביותר לקבלת נתונים משרת.
היא בערך שווה ל-
$.get(url, data, success)
חוץ מזה שהיא שיטה, ולא פונקציה גלובלית ויש לה פונקציה של קריאה חוזרת.
כאשר תגובה מוצלחת
(
כלומר כשה
textStatus
הוא
"success"
או
"notmodified"
),
.load()
מגדירה תוכן HTML של אלמנט בהתאמה באמצעות נתונים שחזרו.
פירוש הדבר ששימוש בשיטה הזאת יכול להיות דיי פשוט:
$('#result').load('ajax/test.html');
פונקציה של קריאה חוזרת מתבצעת אחרי שקובץ נטען:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
בדוגמאות לעיל, אם חסר אלמנט עם
ID "result",
שיטה
.load() לא תתבצעה.
שיטה POST
משמשת אם נתונים מסופקים כי אובייקט,
אם לא, משמשת
GET.
שימו לב: לטיפול באירועים יש שיטה שנקראת
.load(). איזה מהן מופעלת תלוי בארגומנטים שנשלחים.
טעינת חלקי דף
שיטה .load(),
בניגוד ל-
$.get(),
מאפשרת לנו לציין חלק מדף מרוחק להיות מוכנס.
זה מושג עם התחביר מיוחד עבור פרמטר
url.
אם אחת או יותר מרווחים כוללים במחרוזת, חלק ממחרוזת שבא אחרי רווח ראשון מציין לסלקטור
jQuery
איזה תוכן יש לטעון.
אנחנו יכולים לשנות דוגמה לעיל ולהביא רק חלק ממסמך:
$('#result').load('ajax/test.html #container');
כאשר שיטה מתבצעת, היא מחזירה תוכן של
ajax/test.html,
ואחרי זה
jQuery
מנתח מסמך שהוחזר כדי למצוא אלמנט עם
ID container.
אלמנט הזה, יחד עם התוכן שלו, יוכנסו בתוך האלמנט עם
ID result,
וחלק של המסמך שנשאר יושלך.דוגמאות
דוגמה 1
טוען תפריט של ניווט ומכניס אותו ברשימה מסודרת.
$("#new-nav").load("/tryit/footer_navigation.html#jq-footerNavigation li");
דוגמה 1 - קוד מלא:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body{ font-size: 12px; font-family: Arial; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#new-nav").load("/tryit/footer_navigation.html#jq-footerNavigation li");
});
</script>
</head>
<body>
<b>Footer navigation:</b>
<ol id="new-nav"></ol>
</body>
</html>
דוגמה 2
מציג הודעה אם שאילתה של Ajax שגויה.
$("#success").load("/not-here.php", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
דוגמה 2 - קוד מלא:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
body{ font-size: 12px; font-family: Arial; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$("#success").load("/not-here.php", function(response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#error").html(msg + xhr.status + " " + xhr.statusText);
}
});
});
</script>
</head>
<body>
<b>Successful Response (should be blank):</b>
<div id="success"></div>
<b>Error Response:</b>
<div id="error"></div>
</body>
</html>
דוגמה 3
טוען קובץ feeds.html ומכניס אותו בתוך אלמנט עם ID «feeds».
$("#feeds").load("feeds.html");
<div id="feeds"><b>45</b> feeds found.</div>
דוגמה 4
שולח מערך של נתונים לשרת.
$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );
דוגמה 5
כמו בדוגמה לעיל, אבל נתונים נוספים מועברים לשרת באמצעות שיטה POST, אחרי קבלת תגובה משרת מוצגת הודעה.
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
האם מידע זה היה מועיל?
