Kết nối mạng với jQuery

9.1 $đối tượng và phương thức ajax trong jQuery

jQuery cũng có một đối tượng toàn cầu đặc biệt để làm việc với mạng. Như bạn có thể đoán, nó được gọi là $. Vâng, đó là tên. Nhưng nó đơn giản và thuận tiện.

Giả sử bạn muốn gửi yêu cầu tới API trong JavaScript của mình và xử lý phản hồi nhận được. Điều này có thể được thực hiện như thế này:

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

Vậy đó, đó là tất cả mã. $Chúng tôi gọi phương thức trên đối tượng ajax(), nơi chúng tôi chuyển đối tượng mô tả mọi thứ chúng tôi cần: cả yêu cầu và phản hồi.

• Trường typechỉ định loại yêu cầu HTTP: GEThoặcPOST
• Trường urlchỉ định urlyêu cầu sẽ được gửi đến.
• Trường datachỉ định dữ liệu yêu cầu ở định dạng JSON
• Trường thành công chỉ định một chức năng sẽ được gọi sau khi phản hồi thành công từ máy chủ.

9.2 Truy vấn hữu ích

Nhưng nếu bạn không cần chuyển bất kỳ dữ liệu nào, thì yêu cầu có thể được viết ngắn hơn nữa. Ví dụ: bạn có thể viết một yêu cầu POST đơn giản như sau :

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

Bạn có biết mã làm gì không $( ".result" ).html( data );? Hãy thử đoán xem...

Nó tìm thấy một phần tử có lớp kết quả trong tài liệu và thêm mã HTML bên trong nó - dữ liệu data. Vì vậy, trong một vài dòng, bạn có thể tải xuống dữ liệu từ máy chủ và thêm dữ liệu đó vào trang của mình. Chà, nó không phải là một vẻ đẹp sao? :)

Một yêu cầu GET cũng có thể được viết trong một vài dòng:

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

Bạn có muốn tải xuống và thực thi một tập lệnh không?

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

Lấy trang HTML mới nhất?

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

Có một số tài liệu jQuery rất tốt trên internet:

API jQuery

jQuery.ajax()

Ngoài ra, tất cả các câu hỏi phổ biến đều có thể dễ dàng tìm kiếm trên Google và có trên StackOverflow.