หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ข้อมูลเว็บไซต์
ดาวน์โหลด

การปฏิบัติการ Ajax ที่ประกาศ

วิธีที่เร็วที่สุดที่ง่ายที่สุดของคุณในการมีเว็บแอปพลิเคชันหน้าเดียวที่ไม่มีรหัส JavaScript บรรทัดเดียว

การสาธิตสด

การสาธิตสด

เรียกใช้การสาธิต

การสาธิตเป็นเพียงไฟล์คงที่คุณอาจต้องการวางไดเรกทอรีนี้ไว้ในรูทเอกสารเซิร์ฟเวอร์ของคุณหรือเพียงแค่พิมพ์คำสั่งต่อไปนี้ซึ่งจะเริ่มต้นเซิร์ฟเวอร์ HTTP อย่างง่ายบนพอร์ต 8000 จากนั้นชี้เบราว์เซอร์ของคุณบน http: // localhost: 8000/index.html 

python -m SimpleHTTPServer

การประชุม

  • el - องค์ประกอบ DOM
  • $target - วัตถุ jQuery ขององค์ประกอบ DOM target
  • where เป็นหนึ่งใน: closest inside หรือ doc ซึ่งหมายถึงเอกสารทั้งหมด
  • how เป็นหนึ่งใน: prepend , append หรือ replace

การใช้งานประกาศ 

 < a data-toggle =" ajax-load " href =" /posts/today.json " data-target =" .posts " > my link </ a >
< button type =" button " data-toggle =" ajax-ops " > my button </ a >
< div class =" me " data-refresh-url =" /user/me.json " data-template =" user_info " > </ div >
< div class =" posts " data-template =" posts_titles " > </ div >
< div class =" posts " data-template =" full_posts " > </ div >

คุณสามารถกำหนด

  • data-toggle
    • ajax-load - ข้อความที่ดึงข้อมูลเนื้อหา HTML หรือข้อมูลบริสุทธิ์และนำไปใช้กับเป้าหมาย
    • ajax-ops ดึงรหัส JSON
    • ajax-modal * ต้องการการขยาย
  • data-target - ตัวเลือกเพื่อใช้เนื้อหาที่ดึงมา
  • data-url (ซึ่งบางครั้งสามารถแทนที่ด้วย href หรือ data-refresh-url )
  • data-template - เทมเพลตที่จะใช้เพื่อแสดงผลข้อมูลบริสุทธิ์
  • data-format - สามารถเป็น text html หรือ json
  • data-how - สามารถเป็นหนึ่งใน: prepend , append หรือ replace

เทมเพลตเป็นฟังก์ชั่นที่ใช้วัตถุ JSON และส่งคืน HTML คุณสามารถใช้เอ็นจิ้นเทมเพลตใด ๆ แต่เราขอแนะนำให้แฮนด์บาร์

อ้างอิง

  • ajax_ops.flashmsg({html:, text:, type:info|danger, selector:, base_target:$obj, where:closest|inside|''})
    • แสดงข้อมูลหรือกล่องคำเตือนโดยใช้เทมเพลตที่เรียกว่า 'FlashMSG' ข้อความที่กำหนดหรือ HTML และพิมพ์
    • ajax_ops.flashmsg({text:'not found', type:'danger');
    • ajax_ops.flashmsg.call(this, {text:'not found', type:'danger', selector:'.modal', where:'closest'});
    • ได้รับผลกระทบจาก self.flashmsg_opts.selector ซึ่งเป็น .content:first
  • onsubmit="return ajax_ops.submit_form(this, params);"
    • params เป็นตัวเลือก
    • params.target=$obj
    • params.cb=function($target, data){}
  • ajax_ops.loads({html: CONTENT, text: CONTENT, data: JSON, template: NAME, el: ELEMENT, how: prepend|append|replace})
    • ผู้ช่วยในการโหลดข้อมูล HTML ข้อความหรือเทมเพลตลงในองค์ประกอบที่มีตัวเลือกในการผนวกหรือเตรียมไว้ล่วงหน้า
  • ajax_ops.load({el:element, url:, how: prepend|append|replace, selector:, where:closest|inside|, })
  • ajax_ops.refresh(element|selector, params)
    • params เป็นตัวเลือก
    • params.where
    • params.base_element
    • ใช้ ajax_ops.load และยอมรับพารามิเตอร์เช่น how
    • ตัวอย่าง ajax_ops.refresh('.me')
  • ajax_ops.exec_ops([ [op1, selector1, params1], [op2, selector2, params2],.. ])
    • การดำเนินงานสามารถ
      • remove
      • refresh
      • load
      • attr {set:{k:v}, unset:[k1,k2]}
      • class {add:[], remove:[], toggle[]}
      • หนึ่งสามารถขยายด้วยการดำเนินการเพิ่มเติมโดยการเพิ่ม ajax_ops.ops['my_opcode']=function(el, params){}

หมายเหตุ: 

 // register templates
ajax_ops . templates = Handlebars . templates ;
// nice hack
Handlebars . partials = Handlebars . templates ;
// You might want to disable usual links behavior 
$ ( 'a[data-toggle]' ) . click ( function ( e ) { e . preventDefault ( ) } ) ;

ลิขสิทธิ์และใบอนุญาต

ลิขสิทธิ์ 2014 Muayyad Alsadi

ได้รับใบอนุญาตภายใต้ใบอนุญาต Apache เวอร์ชัน 2.0 ("ใบอนุญาต"); คุณไม่สามารถใช้งานนี้ยกเว้นตามใบอนุญาต คุณอาจได้รับสำเนาใบอนุญาตในไฟล์ใบอนุญาตหรือที่:

http://www.apache.org/licenses/license-2.0

เว้นแต่ว่ากฎหมายที่บังคับใช้หรือตกลงเป็นลายลักษณ์อักษรซอฟต์แวร์ที่แจกจ่ายภายใต้ใบอนุญาตจะถูกแจกจ่ายตาม "ตามพื้นฐาน" โดยไม่มีการรับประกันหรือเงื่อนไขใด ๆ ไม่ว่าจะโดยชัดแจ้งหรือโดยนัย ดูใบอนุญาตสำหรับภาษาเฉพาะที่ควบคุมการอนุญาตและข้อ จำกัด ภายใต้ใบอนุญาต

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด