14 เมษายน 2009

การเชื่อมโยง AJAX Easy - ปลั๊กอินไม่ต้อง!

Posted by: Mahbub ใน Ajax

ดังนั้น AJAX AJAX และ AJAX, นั่นคือสิ่งที่เราทำวันนี้อย่างกว้างขวาง จะช่วยประหยัดเวลาเพิ่มพลวัตและช่วยให้คุณรู้สึกของการใช้โปรแกรมซอฟต์แวร์ชนิดของความรู้สึก มีหลายวิธีที่จะใช้ AJAX กับห้องสมุดหลายเท่า แต่เป็นคุณสามารถดูเว็บไซต์นี้เป็นสำหรับ jQuery เราจะมองไปที่พื้นฐานหรือบางทีบางขั้นสูง AJAX ประเพณี

คุณทำอะไรที่เราต้อง?

ห้องสมุด jQuery (แน่นอน)
script php เล็ก ๆ

Let 's เริ่มพูด ใน jQuery มีพื้น 6 ประเภทของวิธีการจะทำดำเนินการ AJAX เหล่านี้คือ

  1. $. Ajax (ตัวเลือก)
  2. $. ได้รับ (URL ข้อมูลการโทรกลับ)
  3. $. getJSON (URL, ข้อมูล, โทรกลับ)
  4. $. getScript (URL โทรกลับ)
  5. โหลด (URL, ข้อมูล, โทรกลับ)
  6. $ โพสต์. (URL, ข้อมูล, โทรกลับ,

นอกเหนือจากหมายเลข 1 ทุกวิธีการอื่น ๆ ใช้ $. Ajax ภายใน ดังนั้นที่หมายถึง $. ajax () เป็นฟังก์ชั่นแม่ของเราสำหรับการดำเนินงาน AJAX jQuery ลองดูที่วิธี $. ajax () ดูเหมือนว่า

  $. Ajax ({
     , ประเภท: "POST",
     , url: "some.php"
     , ข้อมูล: "name = ปีเตอร์และสถานที่ตั้ง = นิวยอร์ก"
     ( msg ) { ประสบความสำเร็จ: ฟังก์ชัน (MSG) {
         "Server Response " + msg ) ; alert ("ตอบสนองของเซิร์ฟเวอร์" + msg);
     }
 }); 

ที่สวยมัน พารามิเตอร์ชนิดจะใช้เวลา "GET" หรือ "POST" ซึ่งหมายความว่าคุณสามารถส่ง 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> ทดสอบการเชื่อมโยง Ajax </ 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>	
 <หัว />
 <body>
 </ body> </ html> 


ตอนนี้ขอเพิ่มการเชื่อมโยงไปยังเอกสารบางอย่าง สำหรับประเภทเมนูที่ดีขึ้นของรูปลักษณ์ที่เราจะใช้ UL> LI และ Link ที่จะมีลักษณะเช่นนี้

  id="nav"> <ul
	 <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 เหล่านั้น วิธีการทำเช่นนั้น? Let 's เพิ่ม divs เหล่านั้นก่อน

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

และส่วนที่จริงตอนนี้ - เราได้ให้การสนับสนุนระดับ "ajax_link" เราจะมีเฉพาะแบบไดนามิกเพิ่มการกระทำ Ajax เท่านั้นที่มีการเชื่อมโยงชื่อชั้นที่เรียกว่า "ajax_link" นรกเราจะไม่เชื่อมโยงทั้งหมดของหน้าเว็บที่จะมีการกระทำ Ajax, เราจะทำอย่างไร

ดังนั้นในการโหลดเอกสารที่เราต้องการทำเช่นนี้

  . ready ( function ( ) { $ (เอกสาร). พร้อม (function () {
         ) . click ( function ( ) { $ ("a.ajax_link"). คลิกที่ (function () {
             this ) ; $ current_link = $ (this);
             $. Ajax ({
                 , ประเภท: "โพสต์"
                 ( "href" ) , URL:. $ current_link attr ("href"),
                 ( e ) { ประสบความสำเร็จ: ฟังก์ชัน (e) {
                     + $current_link. attr ( "rel" ) ) . html ( e ) ; . $ (. "#" + $ current_link attr ("rel")) HTML (e);
                 }
             });
             ; return false;
         });
     }); 

ผมขออธิบายสคริปต์บิต เหตุการณ์ document.ready เป็นเหตุการณ์ที่ถูกทริกเกอร์ที่โหลดหน้า แล้วเรากำลังจัดเรียงของการกำหนดรหัสบางอย่างในกรณีที่คลิกการเชื่อมโยงที่มีคลาส "ajax_link" การทำเช่นนี้ $ current_link = $ (this); ช่วยให้การมีวัตถุเชื่อมโยงในปัจจุบันจะสามารถใช้ได้ภายในฟังก์ชันโทรกลับ และเรามี

$ ("#" + $ current_link.attr ("rel")). html ที่ (จ)

ซึ่งหมายความว่า $ ("div_id") HTML (server_response) และเราได้ตั้งพระราม url ของ $ ฟังก์ชัน ajax แบบไดนามิกที่มี url:.. $ current_link.attr ("href") ดังนั้นตอนนี้ทุกวิธีเหล่านั้น "ทั้งหมดลิงก์ผู้ที่มีคลาส" ajax_link "- เพิ่มตัวจัดการเหตุการณ์ค - แล้วดำเนินการและขอ AJAX การสนับสนุน href poperty และโหลดลงในการตอบสนองที่มี ID div ตรงกับ" rel แอตทริบิวต์ "ของ การเชื่อมโยง " และผลตอบแทนที่ผิดพลาดจะป้องกันไม่ให้การทำงานเชื่อมโยงเช่นการเชื่อมโยงปกติ ;)

วรรณาเห็นมันการกระทำ? นี่มันจะไป

และคุณสามารถ ดาวน์โหลดมา เช่นกัน

ในส่วนถัดไปของการกวดวิชาเล็ก ๆ น้อย ๆ นี้เราจะใช้สิ่งเดียวกัน แต่มีนิด ๆ หน่อย ๆ ของความสะดวกสบาย

การประยุกต์ใช้วิธีการที่ง่ายขึ้น

ทุกอย่างยังคงเป็นเกือบเดียวกัน เราก็จะเปลี่ยนวิธีการ Ajax ที่นี่ ดังนั้นแทนที่จะเขียนบล็อกทั้ง Ajax $. เราสามารถบรรลุสิ่งเดียวกันกับต่อไปนี้

  . ready ( function ( ) { $ (เอกสาร). พร้อม (function () {
 ) . click ( function ( ) { $ ("a.ajax_link"). คลิกที่ (function () {
 + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; ภาระ $ ("#" + $ (นี้) attr ("rel").) ($ (นี้) attr ("href").).
 ; return false;
 });
 }); 

มันมากน้อยซับซ้อนในขณะนี้ใช่มั้ย? วิธีการโหลดโหลดเนื้อหา Ajax ภายในองค์ประกอบที่มันติดกับ ถ้า $ ("# somediv_id"). โหลด ("mypage.php") ก็จะพยายามที่จะโหลดเนื้อหา mypage.php 's อยู่ในนั้น สวยเรียบง่าย, huh? แต่ผมขอแนะนำคุณได้ใช้วิธีการหลัก (แสดงในส่วนแรก)

ในไฟล์ซิปที่มีไฟล์อื่นที่เรียกว่าสถานที่ ajax2.php ซึ่งแสดงให้เห็นถึง methos นี้ซึ่งมีผลเดียวกัน

ดังนั้น AJAX ไม่เป็นยากอย่างที่มันฟังใช่มั้ย? เมื่อคุณเป็นได้อย่างคล่องแคล่วมากกับการดำเนินงาน AJAX, คุณจะสร้างเวทมนตร์

ขอขอบคุณที่อ่านนะ

No Responses to "AJAX ลิงค์ Easy - ปลั๊กอินไม่ต้อง!"

ความคิดเห็นที่ฟอร์ม


  • Virendra: มีปลั๊กอินใหม่ที่มีที่ดีกว่าปลั๊กอินนี้คือ http://jquerybyexample.blogspot.com/2012/03/how-to-create-page-flip-effect-using~~V
  • Tina: ขอขอบคุณสำหรับรายการนี้ใด ๆ ของ alpticapions เหล่านี้จะเป็นประโยชน์อย่างยิ่งสำหรับธุรกิจของช่างภาพงานแต่งงานในยูทาห์?
  • Janelle: ดีเห็นความเชี่ยวชาญจริงบนจอแสดงผล cotnritbuion ของคุณคือการต้อนรับมากที่สุด

นักแปล

English flagItalian flagKorean flagChinese (Simplified) flagChinese (Traditional) flagPortuguese flagGerman flagFrench flagSpanish flagJapanese flagArabic flagRussian flagGreek flagDutch flagBulgarian flagCzech flagCroatian flagDanish flagFinnish flagHindi flagPolish flagRomanian flagSwedish flagNorwegian flagCatalan flagFilipino flagHebrew flagIndonesian flagLatvian flagLithuanian flagSerbian flagSlovak flagSlovenian flagUkrainian flagVietnamese flagAlbanian flagEstonian flagGalician flagMaltese flagThai flagTurkish flagHungarian flag

Tags: