קל הקישור AJAX - אין תוספים הדרושים! | קסם jQuery: עושה קסמים עם jQuery

14 אפריל 2009

קל הקישור AJAX - אין תוספים הדרושים!

פורסם על ידי: Mahbub ב: AJAX

אז AJAX AJAX ו-AJAX, זה מה שאנחנו עושים בימים אלה בהרחבה. זה חוסך זמן, מוסיף דינמיקה והוא נותן לך תחושה של שימוש יישום תוכנה סוג של תחושה. יש עוד דרכים רבות להשתמש ב-AJAX עם ספריות רבות. אבל כפי שאתה יכול לראות באתר זה עבור jQuery, נבדוק את היסוד או אולי כמה שימושים מתקדמים AJAX.

מה אנחנו צריכים?

ספריית jQuery (כמובן)
סקריפט קטן PHP

בואו התחילו לדבר. ב jQuery, יש בעצם 6 סוגים של השיטה לעשות פעולות AJAX. אלה

$. AJAX (אופציות)
$. לקבל (url, נתונים, התקשרות)
$. GetJSON (URL, נתונים, התקשרות)
$. GetScript (התקשרות URL)
עומס (URL, נתונים, התקשרות)
$. פוסט (URL, נתונים, איתות,

מלבד מספר 1, כל השיטות האחרות להשתמש $. AJAX פנימי. אז זה אומר $. AJAX () היא פונקציה אמא שלנו עבור שימוש jQuery פעולות AJAX. בואו נסתכל על כמה $. AJAX () נראה כמו

  $. AJAX ({
     , סוג: "פוסט",
     , כתובת האתר: "some.php",
     , נתונים: "שם = פיטר & מיקום = ניו יורק",
     ( msg ) { הצלחה: פונקציה (MSG) {
         "Server Response " + msg ) ; alert ("תגובת שרת" + msg);
     }
 });

זה פחות או את זה. פרמטר מסוג לוקח "GET" או "פוסט" מה שאומר שאתה יכול לשלוח requestion AJAX כמו POST או GET (אני מעדיף תמיד POST). שאר הפרמטרים הם די מסביר את עצמו אם תסתכל על הקוד שוב.

עכשיו אנחנו הולכים לעשות סקריפט קטן AJAX שקוראת את הקישור של תגיות היפר (<a>) וטוענת את הבקשה על כמה אלמנטים div במסמך.

קודם ניקח HTML רגיל של מסמך PHP אשר ייראה כך

  <DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
 <head>
	 <title> מבחן אייאקס הקישור </ title>
	 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	 <script type="text/javascript" src="jquery-1.2.6.min.js"> </ script>	
 </ Head>
 <body>
 </ Body> </ html>

עכשיו בואו להוסיף כמה קישורים למסמך. סוג התפריט טוב יותר של מראה נשתמש> UL ו LI קישור. זה יראה ככה

  <ul id="nav">
	 <li> <a class="ajax_link" rel="div1" href="response.php?user=john"> טען דיב 1 </ a> </ li>
	 <li> <a class="ajax_link" rel="div2" href="response.php?user=nash"> טען דיב 2 </ a> </ li>
	 <li> <a class="ajax_link" rel="div3" href="response.php?user=stella"> טען דיב 3 </ a> </ li>
	 <li> <a class="ajax_link" rel="div4" href="response.php?user=jason"> טען דיב 4 </ a> </ li>
 </ Ul>

כמו שאתם רואים יש לנו את הקישורים אלמנטים רשימה בתוך האובייקט רשימה לא מסודרת. תסתכל מקרוב על מאפייני תג של <a>. יש לנו, href בכיתה rel תכונה שנראית דבר שונה מאשר קישור רגיל. אם אתה רואה, אנחנו נתנו את התכונה rel כמה שמות div כלומר div1, div2 .. הלאה. זה אומר שאנחנו רוצים את תגובת href להיות טעון לתוך divs אלה. איך לעשות את זה? בואו להוסיף את divs 1

  <span> DIV -1 </ span>
 <div id="div1" class="content_loader"> </ p>
 <span> DIV -2 </ span>
 <div id="div2" class="content_loader"> </ p>
 <span> DIV -3 </ span>
 <div id="div3" class="content_loader"> </ p>
 <span> DIV </ span> -4
 <div id="div4" class="content_loader"> </ p>

והחלק האמיתי עכשיו - אנחנו נתנו את הקישורים בכיתה "ajax_link". אנחנו רק באופן דינמי להוסיף פעולות אייאקס רק קישורים שיש שם מחלקה בשם "ajax_link". לעזאזל, אנחנו לא כל הקישורים בדף יש פעולות אייאקס, נכון?

לכן, על העומס במסמך היינו לעשות את זה.

  . ready ( function ( ) { $ (מסמך). Ready (function () {
         ) . click ( function ( ) { $ ("A.ajax_link"). לחץ על (function () {
             this ) ; Current_link $ = $ (זה);
             $. AJAX ({
                 , סוג: "פוסט",
                 ( "href" ) , כתובת האתר:. $ current_link attr ("href"),
                 ( e ) { הצלחה: פונקציה (ה) {
                     + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ Current_link attr ("rel")) html (ה);
                 }
             });
             ; בתמורה שווא;
         });
     });

תן לי להסביר את התסריט קצת. האירוע document.ready הוא אירוע אשר מופעלת על הטעינה של הדף. ואז אנחנו הקצאת איזה קודים על האירוע לחץ על הקישורים שיש להם שיעור "ajax_link". פעולה זו current_link $ = $ (זה), מאפשר לקבל את האובייקט הקישור הנוכחי יהיה זמין בתוך הפונקציה התקשרות. ויש לנו

$ ("#" + $ Current_link.attr ("rel")). HTML (ה)

כלומר $ ("div_id") HTML (server_response) ויש לנו לקבוע את פרמטר URL של הפונקציה AJAX $ דינמי עם כתובת האתר:.. $ current_link.attr ("href"). אז עכשיו כל אותם אמצעים "כל אותם קישורים שיש להם מעמד" ajax_link "- הוספת המטפל באירועים לחץ - ואז לבצע ולבקש AJAX לוקח קישורים href poperty וטען את התגובה לתוך div id אשר תואם את" rel "התכונה של הקישור ". ואת בתמורה שווא מונע את העבודה כמו קישור קישור רגיל

רוצה לראות אותו בפעולה? כאן זה הולך.

ואתה יכול להוריד את המקור גם כן.

בחלק הבא של מדריך זה קצת נשתמש את אותו הדבר אבל עם קצת נחמה.

יישום שיטה קלה יותר

הכל נשאר כמעט אותו דבר. אנחנו פשוט לשנות את שיטת AJAX כאן. אז במקום לכתוב את כל האגף $. AJAX אנחנו יכולים להשיג את אותו הדבר עם הבאה.

  . ready ( function ( ) { $ (מסמך). Ready (function () {
 ) . click ( function ( ) { $ ("A.ajax_link"). לחץ על (function () {
 + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; . $ (. "#" + $ (זה) attr ("rel")) עומס ($ (זה) attr ("href").);
 ; בתמורה שווא;
 });
 });

זה הרבה פחות מסובך עכשיו, נכון? שיטת הטעינה טוען את תוכן AJAX בתוך רכיב זה מחובר. אם $ ("# somediv_id"). העומס ("mypage.php"), הוא ינסה לטעון את תוכן mypage.php של בו. די פשוט, הא? אבל אני מציע לך להתרגל לשיטה העיקרית (מוצג בחלק הראשון).

בקובץ zip יש עוד קובץ בשם ajax2.php אשר מדגים את methos שיש לו את אותה תוצאה.

אז, AJAX לא קשה כמו שזה נשמע, נכון? כאשר אתה הופך רהוטה מאוד עם פעולות AJAX, תיצור קסמים.

תודה על הקריאה אגב.

תגיות: אייאקס , עומס AJAX תוכן

קל הקישור AJAX - אין תוספים הדרושים!

יישום שיטה קלה יותר

אין תגובות ל "הקישור AJAX קל - ללא תוספים צריך!"

תגובה טופס

קטגוריות

ארכיון

תגובות אחרונות

ארכיון

הודעות אחרונות

חיפוש

מתרגם

תגיות

המועדפים שלי

Mahbub של בלוג