14 เมษายน 2009

ลิงค์ AJAX ง่าย - ปลั๊กอินไม่ต้อง!

โพสต์โดย: มะห์ใน: อาแจ็กซ์

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

คุณจะทำสิ่งที่เราต้องการ?

ห้องสมุด jQuery (แน่นอน)
สคริปต์ PHP เล็ก ๆ

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

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

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

 msg ) ; } } ) ; การตอบสนอง "+ msg);}}); 

ที่สวยมัน พารามิเตอร์ชนิดใช้ "GET" หรือ "POST" ซึ่งหมายความว่าคุณสามารถส่ง requestion AJAX เช่น POST หรือ GET (ผมชอบโพสต์เสมอไป) ส่วนที่เหลือของพารามิเตอร์จะสวยอธิบายตนเองถ้าคุณดูที่รหัสอีกครั้ง

ตอนนี้เรากำลังจะทำให้สคริปต์ 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 และการเชื่อมโยง ที่จะมีลักษณะเช่นนี้

  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 เหล่านั้น วิธีการทำ? ขอเพิ่ม 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" นรกเราจะไม่เชื่อมโยงทั้งหมดของหน้าจะมีการกระทำของอาแจ็กซ์เราจะทำอย่างไร

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

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

ผมขออธิบายสคริปต์บิต เหตุการณ์ 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 และโหลดการตอบสนองใน div ที่มี id ที่ตรงกับ" rel แอตทริบิวต์ "ของ การเชื่อมโยง " และผลตอบแทนการเท็จป้องกันไม่ให้การทำงานของการเชื่อมโยงเช่นการเชื่อมโยงปกติ ;)

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

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

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

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

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

  . ready ( function ( ) { $ (document). พร้อม (ฟังก์ชัน () {
 ) . click ( function ( ) { $ ("a.ajax_link"). คลิก (ฟังก์ชัน () {
 + $ ( this ) . attr ( "rel" ) ) . load ( $ ( this ) . attr ( "href" ) ) ; โหลด $ ("#" + $ (นี้) attr ("rel").) ($ (นี้) attr ("href").).
 ; กลับเท็จ;
 });
 }); 

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

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

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

ขอขอบคุณที่อ่านครับ

การตอบสนองต่อ 1 ลิงค์ "AJAX ง่าย - ปลั๊กอินไม่ต้อง!"

1 | ressource เว็บ

พฤศจิกายน 26, 2012 ที่ 21:54

Avatar

ขอบคุณสำหรับการโพสต์ที่ยิ่งใหญ่อีกรูปแบบหนึ่ง ผมมีความสุขอย่างแท้จริงอ่านมันคุณอาจจะ author.I ดีจะให้แน่ใจว่าจะบุ๊ค​​มาร์คบล็อกของคุณและจะกลับมาลงที่ถนน ผมต้องการที่จะขอแนะนำให้คุณยังคงทำงานที่ดีของคุณได้ในตอนเช้าดี!

แสดงความเห็นแบบฟอร์ม


  • Роман: нормаспасибо
  • Lsqoswsh: ฉันจะต้องจ่ายรายสัปดาห์หรือรายเดือน สนุกโกธิคโลลิต้า
  • Rlbbuwhe: ผู้จัดการ http://community.parents.com/asumouooi/blog/2013/04/04/lolita_kingdom_nude_pics สาวบริสุทธิ์ pedo Lolis ว่าสาวผิวไฟก้นเขา

ล่าม

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

แท็ก