jQuery ajax - วิธี getJSON()

jQuery Ajax คู่มืออ้างอิง

ตัวอย่าง

ใช้คำขอ AJAX ในการได้รับข้อมูล JSON และแสดงผล

$("button").click(function(){
  $.getJSON("demo_ajax_json.js",function(result){
    $.each(result, function(i, field){
      $("div").append(field + " ");
    );
  );
);

ลองด้วยตัวเอง

คำอธิบายและวิธีใช้

โหลดข้อมูล JSON ผ่านคำขอ HTTP GET

ใน jQuery 1.2 คุณสามารถใช้ JSONP โดยใช้ฟังก์ชันคอบคลางเพื่อโหลดข้อมูล JSON จากโดเมนอื่น อย่างเช่น "myurl?callback=?" จะถูกแทนที่ด้วยชื่อฟังก์ชันที่ถูกต้องเพื่อปฏิบัติฟังก์ชันคอบคลาง จำเป็น: รหัสที่อยู่หลังจากบรรทัดนี้จะทำงานก่อนฟังก์ชันคอบคลางทำงาน

ภาษาเขียน

jQuery.getJSON(url,data,success(data,status,xhr)})
ตัวแปร คำอธิบาย
url จำเป็น
data เลือกได้เสมอ
success(data,status,xhr)}

ใช้งานตามความต้องการ

ประกาศเพิ่มเติม:

  • response - มีข้อมูลผลลัพธ์จากการขอ
  • status - มีสถานะของการขอ
  • xhr - มี XMLHttpRequest อ็อบเจ็กท์

รายละเอียด

ฟังก์ชันนี้เป็น Ajax ฟังก์ชันที่ย่อลง ตรงกันข้ามกับ

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
);

ข้อมูลที่ส่งไปยังเซิร์ฟเวอร์สามารถเสริมเป็นคำถามข้อความหลัง URL หาก data ค่าของประกาศเป็นอ็อบเจ็กท์ (แผนผัง) จะถูกเปลี่ยนเป็นตัวอักษร และเข้ารหัส URL ก่อนที่จะเสริมที่หลัง URL

ส่งผ่าน callback ข้อมูลที่กลับมา สามารถเป็นอ็อบเจ็กท์ JavaScript หรือตัวแปรซึ่งถูกกำหนดโดย JSON และนำไปประกาศด้วยวิธี $.parseJSON()

ตัวอย่าง

โหลด JSON ข้อมูลจาก test.js และแสดงข้อมูลฟิลด์ name ใน JSON ข้อมูล:

$.getJSON("test.js", function(json){
  alert("JSON Data: " + json.users[3].name);
);

ตัวอย่างเพิ่มเติม

ตัวอย่าง 1

โหลด 4 ภาพสุดท้ายเกี่ยวกับแมวจาก API JSONP ของ Flickr:

โค้ด HTML:

<div id="images"></div>

jQuery โค้ด:


$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?
tags=cat&tagmode=any&format=json&jsoncallback=?", function(data){
  $.each(data.items, function(i,item){
    $("<img/>").attr("src", item.media.m).appendTo("#images");
    if ( i == 3 ) return false;
  );
);

ตัวอย่าง 2

โหลด JSON ข้อมูลจาก test.js และเพิ่มประกาศ แสดงข้อมูลฟิลด์ name ใน JSON ข้อมูล:

$.getJSON("test.js", { name: "Bill", time: "2pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
);

jQuery Ajax คู่มืออ้างอิง