jQuery ajax - phương thức getJSON()

jQuery Ajax Tham khảo hướng dẫn

Mô hình

Sử dụng yêu cầu AJAX để lấy dữ liệu JSON và hiển thị kết quả:

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

Thử ngay

Định nghĩa và cách sử dụng

Tải dữ liệu JSON thông qua yêu cầu HTTP GET.

Trong jQuery 1.2, bạn có thể tải dữ liệu JSON từ các域 khác bằng cách sử dụng hàm回调 JSONP, như "myurl?callback=?". jQuery sẽ tự động thay thế ? bằng tên hàm chính xác để thực hiện hàm回调. Lưu ý: Mã sau này sẽ được thực hiện trước khi hàm回调 này được thực hiện.

Cú pháp

jQuery.getJSON(url,data,success(data,status,xhr))
Tham số Mô tả
url Bắt buộc. Định nghĩa URL nào sẽ gửi yêu cầu.
data Chọn. Định nghĩa dữ liệu kèm theo yêu cầu gửi lên máy chủ.
success(data,status,xhr)

Tùy chọn. Định nghĩa hàm chạy khi yêu cầu thành công.

Các tham số bổ sung:

  • response - Chứa dữ liệu kết quả từ yêu cầu
  • status - Chứa trạng thái của yêu cầu
  • xhr - Chứa đối tượng XMLHttpRequest

Giải thích chi tiết

Hàm này là viết tắt của hàm Ajax, tương đương với:

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

Dữ liệu gửi lên máy chủ có thể được thêm vào URL sau dạng chuỗi tìm kiếm. Nếu data Nếu giá trị của tham số là đối tượng (bản đồ), nó sẽ được chuyển đổi thành chuỗi và mã hóa URL trước khi thêm vào URL.

Chuyển giao cho callback Dữ liệu trả về có thể là đối tượng JavaScript hoặc mảng được định nghĩa theo cấu trúc JSON, và được phân tích bằng phương pháp $.parseJSON().

Bài mẫu

Tải dữ liệu JSON từ test.js và hiển thị dữ liệu trong trường name của JSON dữ liệu:

$.getJSON("test.js", function(json){
  alert("Dữ liệu JSON: " + json.users[3].name);
);

Các ví dụ khác

Ví dụ 1

Tải 4 bức ảnh mới nhất về mèo từ API JSONP của Flickr:

Mã HTML:

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

Mã 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;
  );
);

Ví dụ 2

Tải dữ liệu JSON từ test.js, thêm tham số, hiển thị dữ liệu trong trường name của JSON dữ liệu:

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

jQuery Ajax Tham khảo hướng dẫn