เครือข่ายด้วย jQuery

9.1 $ object และ ajax method ใน jQuery

jQuery ยังมีวัตถุส่วนกลางพิเศษสำหรับการทำงานกับเครือข่าย อย่างที่คุณเดาได้ มันเรียก$ว่า ใช่นั่นคือชื่อ แต่มันง่ายและสะดวก

สมมติว่าคุณต้องการส่งคำขอไปยัง API ใน JavaScript ของคุณและประมวลผลการตอบกลับที่ได้รับ สามารถทำได้ดังนี้:

$.ajax({
  type: "POST",
  url: "api.codegym.cc",
  data: {name: 'Bill', location: 'Radmond'},
  success: function(msg){
    alert( "Person found: " + msg );
  }
});

แค่นั้นแหละ นั่นคือรหัสทั้งหมด $เราเรียกเมธอดบนออบเจกต์ajax()โดยเราส่งออบเจกต์ที่อธิบายทุกอย่างที่เราต้องการ ทั้งคำขอและการตอบสนอง

• ช่องtypeระบุประเภทของคำขอ HTTP: GETหรือPOST
• ฟิลด์urlระบุurlว่าคำขอจะถูกส่งไปที่ใด
• ช่องdataระบุข้อมูลคำขอในรูปแบบ JSON
• ฟิลด์ความสำเร็จระบุฟังก์ชันที่จะเรียกใช้หลังจากการตอบสนองที่สำเร็จจากเซิร์ฟเวอร์

9.2 แบบสอบถามที่เป็นประโยชน์

แต่ถ้าคุณไม่ต้องการถ่ายโอนข้อมูลใด ๆ ก็สามารถเขียนคำขอให้สั้นลงได้ ตัวอย่างเช่น คุณสามารถเขียนคำขอ POST ง่ายๆ ดังนี้

$.post("ajax/test.html", function( data ) {
  $( ".result" ).html( data );
});

คุณรู้หรือไม่ว่ารหัสทำอะไร$( ".result" ).html( data );? มาลองทายกันดู...

ค้นหาองค์ประกอบที่มีคลาสผลลัพธ์ในเอกสาร และเพิ่มโค้ด HTML ภายในนั้น - datadata ดังนั้นในสองสามบรรทัด คุณสามารถดาวน์โหลดข้อมูลจากเซิร์ฟเวอร์และเพิ่มลงในเพจของคุณได้ มันไม่สวยงามเหรอ? :)

คำขอ GETสามารถเขียนได้ในสองสามบรรทัด:

$.get("ajax/test.html"., function( data ) {
  $( ".result" ).html( data );
});

คุณต้องการดาวน์โหลดและเรียกใช้สคริปต์หรือไม่

$.ajax({
  method: "GET",
  url: "test.js",
  dataType: "script"
});

รับหน้า HTML ล่าสุดหรือไม่

$.ajax({
  url: "test.html",
  cache: false
})
  .done(function( html ) {
    $( "#results" ).append( html );
  });

มีเอกสาร jQuery ที่ดีมากบนอินเทอร์เน็ต:

jQuery API

jQuery.ajax()

นอกจากนี้ คำถามทั่วไปทั้งหมดสามารถ googled ได้อย่างง่ายดายและอยู่ใน StackOverflow