Làm cách nào để lấy dữ liệu từ jQuery AJAX trong php?

Trong hướng dẫn này, bạn sẽ tìm hiểu cách gửi và nhận dữ liệu từ máy chủ web thông qua Ajax thông qua phương thức HTTP GET hoặc POST bằng jQuery

Các phương thức

jQuery post[] Demo




    
        Name: 
        Comment: 
        
    
    

3 và

jQuery post[] Demo




    
        Name: 
        Comment: 
        
    
    

4 của jQuery

Các phương thức

jQuery post[] Demo




    
        Name: 
        Comment: 
        
    
    

jQuery post[] Demo




    
        Name: 
        Comment: 
        
    
    

jQuery post[] Demo




    
        Name: 
        Comment: 
        
    
    

jQuery post[] Demo




    
        Name: 
        Comment: 
        
    
    

Cú pháp cơ bản của các phương thức này có thể được đưa ra với

$. get[URL, dữ liệu, thành công]; . bài đăng [URL, dữ liệu, thành công];

Các tham số trong cú pháp trên có ý nghĩa như sau

• Tham số URL bắt buộc chỉ định URL mà yêu cầu được gửi tới
• Tham số dữ liệu tùy chọn chỉ định một bộ chuỗi truy vấn [i. e. cặp khóa/giá trị] được gửi đến máy chủ web cùng với yêu cầu
• Tham số thành công tùy chọn về cơ bản là chức năng gọi lại được thực thi nếu yêu cầu thành công. Nó thường được sử dụng để lấy dữ liệu trả về

Ghi chú. Các phương thức HTTP GET và POST được sử dụng để gửi yêu cầu từ trình duyệt đến máy chủ. Sự khác biệt chính giữa các phương pháp này là cách dữ liệu được truyền đến máy chủ. Xem hướng dẫn về phương thức GET và POST để biết giải thích chi tiết và so sánh giữa hai phương thức này

Thực hiện yêu cầu GET với AJAX bằng jQuery

Ví dụ sau sử dụng phương thức jQuery

jQuery post[] Demo




    
        Name: 
        Comment: 
        
    
    

jQuery get[] Demo




    

        
Content of the result DIV box will be replaced by the server date and time
    

    Load Date and Time

Đây là "ngày-giờ" của chúng tôi. php" chỉ xuất ra ngày và giờ hiện tại của máy chủ

Mẹo. Nếu bạn gặp bất kỳ khó khăn nào khi chạy cục bộ các ví dụ này trên PC của mình, vui lòng xem hướng dẫn về tải jQuery Ajax để biết giải pháp

Bạn cũng có thể gửi một số dữ liệu đến máy chủ với yêu cầu. Trong ví dụ sau, mã jQuery tạo một yêu cầu Ajax tới "tạo bảng. php" cũng như gửi một số dữ liệu bổ sung đến máy chủ cùng với yêu cầu

jQuery get[] Demo




    Enter a Number: 
    Show Multiplication Table
    

Đây là tập lệnh PHP của "tạo bảng. php" chỉ cần xuất bảng cửu chương cho số được người dùng nhập khi nhấp vào nút

 0]{
    echo "";
    for[$i=0; $i

Thực hiện yêu cầu POST với AJAX bằng jQuery

Các yêu cầu POST giống hệt với các yêu cầu GET trong jQuery. Vì vậy, nói chung, phương pháp nào bạn nên sử dụng

jQuery post[] Demo




    
        Name: 
        Comment: 
        
    
    

jQuery post[] Demo




    
        Name: 
        Comment: 
        
    
    

jQuery post[] Demo




    
        Name: 
        Comment: 
        
    
    

Đây là "bình luận hiển thị" của chúng tôi. php" chỉ xuất dữ liệu do người dùng nhập vào

";
echo "Here's the comment what you've entered: $comment";
?>

Bây giờ bạn đã học cách thực hiện các thao tác Ajax khác nhau như tải dữ liệu, gửi biểu mẫu, v.v. sử dụng jQuery không đồng bộ. Trước khi kết thúc chương này, hãy xem thêm một ví dụ cổ điển về Ajax sẽ chỉ cho bạn cách điền danh sách thả xuống của tiểu bang hoặc thành phố dựa trên tùy chọn được chọn trong danh sách thả xuống quốc gia bằng cách sử dụng jQuery

Hàm gọi lại được thực thi nếu yêu cầu thành công. Bắt buộc nếu cung cấp

$.get[ "ajax/test.html", function[ data ] {
  $[ ".result" ].html[ data ];
  alert[ "Load was performed." ];
}];

$.get[ "ajax/test.html", function[ data ] {
  $[ ".result" ].html[ data ];
  alert[ "Load was performed." ];
}];

$.get[ "ajax/test.html", function[ data ] {
  $[ ".result" ].html[ data ];

  

  alert[ "Load was performed." ];
}];

Đây là một hàm Ajax tốc ký, tương đương với

1

2

3

4

5

6

Hàm gọi lại

$.get[ "ajax/test.html", function[ data ] {
  $[ ".result" ].html[ data ];
  alert[ "Load was performed." ];
}];

Kể từ jQuery 1. 5, hàm gọi lại

$.get[ "ajax/test.html", function[ data ] {
  $[ ".result" ].html[ data ];
  alert[ "Load was performed." ];
}];

$.get[ "ajax/test.html", function[ data ] {

  

  $[ ".result" ].html[ data ];
  alert[ "Load was performed." ];
}];

$.get[ "ajax/test.html", function[ data ] {
  $[ ".result" ].html[ data ];
  alert[ "Load was performed." ];
}];

$.get[ "ajax/test.html", function[ data ] {
  $[ ".result" ].html[ data ];
  alert[ "Load was performed." ];
}];

Hầu hết các triển khai sẽ chỉ định trình xử lý thành công

1

2

3

4

$.get[ "ajax/test.html", function[ data ] {
  $[ ".result" ].html[ data ];
  alert[ "Load was performed." ];
}];

Ví dụ này tìm nạp đoạn mã HTML được yêu cầu và chèn đoạn mã đó vào trang

Đối tượng jqXHR

Kể từ jQuery 1. 5, tất cả các phương thức Ajax của jQuery đều trả về một siêu đối tượng của đối tượng

Giao diện Promise cũng cho phép các phương thức Ajax của jQuery, bao gồm

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

Thông báo Khấu hao

Các phương thức gọi lại

jQuery get[] Demo




    Enter a Number: 
    Show Multiplication Table
    

jQuery get[] Demo




    Enter a Number: 
    Show Multiplication Table
    

jQuery get[] Demo




    Enter a Number: 
    Show Multiplication Table
    

Ghi chú bổ sung

• Do các hạn chế về bảo mật của trình duyệt, hầu hết các yêu cầu "Ajax" đều phải tuân theo cùng một chính sách gốc;
• Nếu một yêu cầu với jQuery. get[] trả về một mã lỗi, nó sẽ bị lỗi âm thầm trừ khi tập lệnh cũng được gọi là mã lỗi toàn cầu. phương thức ajaxError[]. Ngoài ra, kể từ jQuery 1. 5, phương thức

  
  
  
  
  jQuery get[] Demo
  
  
  
  
      Enter a Number: 
      Show Multiplication Table
      
  
  

  96 của đối tượng

  $.get[ "ajax/test.html", function[ data ] {
    $[ ".result" ].html[ data ];
    alert[ "Load was performed." ];
  }];

  8 do jQuery trả về. get[] cũng có sẵn để xử lý lỗi
• Các yêu cầu tập lệnh và JSONP không phải tuân theo các hạn chế về chính sách gốc giống nhau

jQuery get[] Demo




    Enter a Number: 
    Show Multiplication Table
    

 0]{
    echo "";
    for[$i=0; $i

 0]{
    echo "";
    for[$i=0; $i

jQuery post[] Demo




    
        Name: 
        Comment: 
        
    
    

jQuery post[] Demo




    
        Name: 
        Comment: 
        
    
    

jQuery post[] Demo




    
        Name: 
        Comment: