Cách trả lại phản hồi JSON trong PHP & MySQL bằng Ajax và jQuery – ví dụ ajax json php mysql

Được đăng ban đầu @ https://codeanddeploy.com , hãy truy cập và tải xuống mã mẫu : https://codeanddeploy.com/blog/php/how-to-return-json-response-in-php-mysql-using-ajax-and-jquery

Trong hướng dẫn này, tôi sẽ chia sẻ với bạn cách trả về phản hồi JSON trong PHP & amp; MySQL sử dụng Ajax & amp; jQuery điều này rất hữu ích để hiển thị nhiều loại dữ liệu từ phản hồi của máy chủ và xử lý nó tới phía máy khách của chúng tôi bằng cách sử dụng ajax và jquery. Đừng lo lắng, phương pháp này rất dễ dàng, chúng tôi sẽ sử dụng một mảng từ máy chủ và mã hóa nó bằng định dạng JSON.

Ví dụ cơ bản

Hãy làm những điều cơ bản trước, chúng ta sẽ tạo một tệp mới có tên basic.php như bạn có thể thấy mã bên dưới Tôi đã tạo một mảng liên kết với first_name & amp; khóa tên last_name. Sau đó, tôi sử dụng json_encode để mã hóa mảng thành định dạng JSON.

  
 & lt;? php 

    
 $ result 
 
 = 
 
 []; 
    
 $ result 
 
 [
 
 'first_name' 
 
 ] 
 
 = 
 
 "John" 
 
; 
    
 $ result 
 
 [
 
 'last_name' 
 
 ] 
 
 = 
 
 "Doe" 
 
; 

    
 echo 
 
 json_encode 
 
 (
 
 $ result < / p> 
); 

? & gt; 
 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Sau đó, đây là kết quả khi thực thi nó trong trình duyệt.

Tích hợp AJAX

Để tích hợp ajax, chúng ta cần tạo một nút đơn giản trong index.html, sau đó tạo một hàm ajax đơn giản để giao tiếp đoạn mã trên basic.php .

Hãy mã hóa nút của chúng tôi bằng HTML.

  
 & lt; button 
 
 type = 
 
 " nút "
 
 class = 
 
" btn btn-primary "
 
 id =  
 "btnBasicResponse" 
 
 & gt; 
 Phản hồi JSON cơ bản 
 & lt; / button & gt; 

 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Tiếp theo là mã ajax javascript của chúng tôi. Chúng tôi sẽ tạo hàm có tên basic () bên trong scripts.js . Đây là mã bên dưới:

  
 function 
 
 basic 
 
 () 
 {
    
 $ 
 
 (
 
 tài liệu 
 
)  
. 
 
 đại biểu 
 
 (
 
 " #btnBasicResponse "
 
, 
 
" nhấp "
 
, 
 
 function 
 
 () 
 
 {

        
 // Cấu hình Ajax 
        
 $ 
 
. 
 
 ajax 
 
 ({< / p>
            
 loại 
 
: 
 
 "NHẬN" 
 
, 
 
 // chúng tôi đang sử dụng phương thức GET để lấy dữ liệu từ phía máy chủ 
            
 url 
 
: 
 
 'basic.php' 
 
, 
 
 // lấy giá trị tuyến 
            
 thành công 
 
: 
 
 chức năng 
 
 ( 
 phản hồi 
 
) 
 
 {
 
 / / khi yêu cầu được xử lý thành công tới phía máy chủ, nó sẽ trả về kết quả tại đây 
                
 bảng điều khiển 
 
. 
 
 log 
 
 ( 
 phản hồi 
 
) 
            
} 
        
}); 

    
}); 
} 
 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Sau đó, nếu chúng tôi nhấp vào nút “Phản hồi JSON cơ bản”, kết quả sẽ như thế này trên bảng điều khiển.

Tiếp theo, chúng tôi sẽ phân tích cú pháp JSON phản hồi để chúng tôi có thể dễ dàng gọi nó là JSON. Xem mã bên dưới.

  
 function 
 
 basic 
 
 () 
 {
 $ 
 
 (
 
 tài liệu 
 
)  
. 
 
 đại biểu 
 
 (
 
 " #btnBasicResponse "
 
, 
 
" nhấp "
 
, 
 
 function 
 
 () 
 
 {

        
 // Cấu hình Ajax 
        
 $ 
 
. 
 
 ajax 
 
 ({< / p>
            
 loại 
 
: 
 
 "NHẬN" 
 
, 
 
 // chúng tôi đang sử dụng phương thức GET để lấy dữ liệu từ phía máy chủ 
            
 url 
 
: 
 
 'basic.php' 
 
, 
 
 // lấy giá trị tuyến 
            
 thành công 
 
: 
 
 chức năng 
 
 ( 
 phản hồi 
 
) 
 
 {
 
 / / khi yêu cầu được xử lý thành công tới phía máy chủ, nó sẽ trả về kết quả tại đây 
                
 // phân tích cú pháp json 
                
 phản hồi 
 
 = 
 
 JSON 
 
.  
 phân tích cú pháp 
 
 (
 
 phản hồi 
 
) ; 

                
 bảng điều khiển 
 
. 
 
 log 
 
 ( 
 phản hồi 
 
) 
            
} 
        
}); 

    
}); 
} 
 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Như bạn có thể thấy, chúng tôi thêm một dòng mã mới “response = JSON.parse (response);”. Vui lòng xem kết quả bảng điều khiển sau mã này.

Như bạn có thể thấy từ kết quả ở trên, bây giờ có thể nhấp vào, vì chúng tôi đã phân tích cú pháp nó dưới dạng JSON từ một chuỗi.

Hiển thị theo Thuộc tính JSON

Bây giờ, chúng tôi sẽ hiển thị JSON theo thuộc tính như thể bạn chỉ muốn hiển thị giá trị first_name. Đây là cập nhật mã bên dưới:

  
 function 
 
 basic 
 
 () 
 {
    
 $ 
 
 (
 
 tài liệu 
 
)  
. 
 
 đại biểu 
 
 (
 
 " #btnBasicResponse "
 
, 
 
" nhấp "
 
, 
 
 function 
 
 () 
 
 {

        
 // Cấu hình Ajax 
        
 $ 
 
. 
 
 ajax 
 
 ({< / p>
            
 loại 
 
: 
 
 "NHẬN" 
 
, 
 
 // chúng tôi đang sử dụng phương thức GET để lấy dữ liệu từ phía máy chủ 
            
 url 
 
: 
 
 'basic.php' 
 
, 
 
 // lấy giá trị tuyến 
            
 thành công 
 
: 
 
 chức năng 
 
 ( 
 phản hồi 
 
) 
 
 {
 
 / / khi yêu cầu được xử lý thành công tới phía máy chủ, nó sẽ trả về kết quả tại đây 
                
 // phân tích cú pháp json 
                
 phản hồi 
 
 = 
 
 JSON 
 
.  
 phân tích cú pháp 
 
 (
 
 phản hồi 
 
) ; 

                
 bảng điều khiển 
 
. 
 
 log 
 
 ( 
 phản hồi 
 
); 
                
 bảng điều khiển 
 
. 
 
 log 
 
 ( 
 "Tên:" 
 
 + 
 
 phản hồi 
 
. 
 
 first_name 
 
); 
            
} 
        
}); 

    
}); 
} 
 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Như bạn có thể thấy bên dưới, chúng tôi thêm một dòng mã mới “console.log (” First Name: “+ response.first_name);” bây giờ trong mã này, chúng tôi chỉ truy cập vào giá trị first_name.

Hiển thị Thuộc tính JSON trong HTML

Bây giờ chúng tôi sẽ hiển thị thuộc tính cụ thể trên trang web của bạn. Chúng tôi sẽ cập nhật mã HTML của mình bên dưới.

  
 & lt; button 
 
 type = 
 
 " nút "
 
 class = 
 
" btn btn-primary "
 
 id =  
 "btnBasicResponse" 
 
 & gt; 
 Phản hồi JSON cơ bản 
 & lt; / button & gt; 
 & lt; br & gt; 
 & lt; p & gt; & lt; span 
 
 id = 
 
 "json_first_name" 
 & gt; & lt; / span & gt; & lt; / p & gt; 
 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Sau đó, cũng mã javascript của chúng tôi bên trong scripts.js . Xem các cập nhật mã bên dưới.

  
 function 
 
 basic 
 
 () 
 {
    
 $ 
 
 (
 
 tài liệu 
 
)  
. 
 
 đại biểu 
 
 (
 
 " #btnBasicResponse "
 
, 
 
" nhấp "
 
, 
 
 function 
 
 () 
 
 {

        
 // Cấu hình Ajax 
        
 $ 
 
. 
 
 ajax 
 
 ({< / p>
            
 loại 
 
: 
 
 "NHẬN" 
 
, 
 
 // chúng tôi đang sử dụng phương thức GET để lấy dữ liệu từ phía máy chủ 
            
 url 
 
: 
 
 'basic.php' 
 
, 
 
 // lấy giá trị tuyến 
            
 thành công 
 
: 
 
 chức năng 
 
 ( 
 phản hồi 
 
) 
 
 {
 
 / / khi yêu cầu được xử lý thành công tới phía máy chủ, nó sẽ trả về kết quả tại đây 
                
 // phân tích cú pháp json 
                
 phản hồi 
 
 = 
 
 JSON 
 
.  
 phân tích cú pháp 
 
 (
 
 phản hồi 
 
) ; 

                
 $ 
 
 (
 
 "# json_first_name" 
 
 ) 
 
. 
 
 html 
 
 (
 
" Tên: "
 
 + 
 
 phản hồi 
 
. 
 
 first_name 
 
); 
            
} 
        
}); 

    
}); 
} 
 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Như bạn có thể thấy ở trên, tôi thêm dòng mã mới “$ (” # json_first_name “). html (” First Name: “+ response.first_name);”. Tôi gọi bộ chọn ID là “#json_first_name” và sử dụng hàm html () để hiển thị giá trị first_name từ máy chủ của bạn.

Xem kết quả bên dưới:

Bây giờ vì bạn đã có kiến ​​thức cơ bản về cách Đáp ứng JSON, chúng tôi sẽ triển khai dữ liệu động bằng cách sử dụng PHP & amp; MySQL với Ajax.

Hiển thị dữ liệu động bằng JSON đáp ứng với PHP & amp; MySQL

Tôi sẽ chia sẻ với bạn phương pháp dễ dàng để hiển thị dữ liệu động từ phía máy chủ của bạn. Trong ví dụ này, chúng tôi sẽ hiển thị nhân viên trong Chỉnh sửa phương thức nhân viên bằng cách sử dụng ajax và jquery.

Đây là mã HTML bên trong index.html

  
 & lt; div 
 
 class = 
 
 " col-md-8 "
 
 & gt; 
    
 & lt; h3 & gt; 
 Danh sách nhân viên 
 & lt; / h3 & gt; 
    
 & lt; div 
 
 id = 
 
 "danh sách nhân viên" 
 
 & gt; & lt; / div & gt; 
 & lt; / div & gt; 
 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Mã HTML của chúng tôi cho phương thức bên trong index.html

  
 & lt;! - Phương thức - & gt; 
 & lt; div 
 
 class = 
 
 "modal" 
 
 id = 
 
" edit-worker-modal "
 
 & gt; 
    
 & lt; div 
 
 class = 
 
 "modal-hộp thoại" 
 
 & gt; 
        
 & lt; div 
 
 class = 
 
 "modal-content" 
 
 & gt; 

            
 & lt;! - Tiêu đề Phương thức - & gt; 
            
 & lt; div 
 
 class = 
 
 "modal-header" 
 
 & gt; 
                
 & lt; h4 
 
 class = 
 
 "modal-title" 
 
 & gt; 
 Chỉnh sửa Nhân viên 
 & lt; / h4 & gt; 
                
 & lt; button 
 
 type = 
 
 "button" 
 
 class = 
 
" close "
 
 data-allow = 
 
" modal " 
 
 & gt; 
 
 & amp; times; 
 
 & lt; / button & gt; 
            
 & lt; / div & gt; 

            
 & lt;! - Nội dung phương thức - & gt; 
            
 & lt; div 
 
 class = 
 
 "modal-body" 
 & gt; 
                
 & lt; form 
 
 action = 
 
 "update.php" 
 
 id = 
 
 "edit-form" 
 
 & gt; 
                    
 & lt; input 
 
 class = 
 
 "form-control" 
 
 type = 
 
 "hidden" 
 
 name = 
 
 "id" 
 
 & gt; 
                    
 & lt; div 
 
 class = 
 
 "form-group" 
 
 & gt; 
                        
 & lt; label 
 
 for = 
 
 "email" 
 
 & gt; 
 Gửi email 
 & lt; / label & gt; 
                        
 & lt; input 
 
 class = 
 
 "form-control" 
 
 type = 
 
 "text" 
 
 name = 
 
 "email" 
 
 & gt; 
                    
 & lt; / div & gt; 
                    
 & lt; div 
 
 class = 
 
 "form-group" 
 
 & gt; 
                        
 & lt; label 
 
 for = 
 
 "first_name" 
 
 & gt; 
 Tên 
 & lt; / label & gt; 
                        
 & lt; input 
 
 class = 
 
 "form-control" 
 
 type = 
 
 "text" 
 
 name = 
 
 "first_name" 
 
 & gt; 
                    
 & lt; / div & gt; 
                    
 & lt; div 
 
 class = 
 
 "form-group" 
 
 & gt; 
                        
 & lt; label 
 
 for = 
 
 "last_name" 
 
 & gt; 
 Họ 
 & lt; / label & gt; 
                        
 & lt; input 
 
 class = 
 
 "form-control" 
 
 type = 
 
 "text" 
 
 name = 
 
 "last_name" 
 
 & gt; 
                    
 & lt; / div & gt; 
                    
 & lt; div 
 
 class = 
 
 "form-group" 
 
 & gt; 
                        
 & lt; label 
 
 for = 
 
 "address" 
 
 & gt; 
 Địa chỉ 
 & lt; / label & gt; 
                        
 & lt; textarea 
 
 class = 
 
 "form-control" 
 
 type = 
 
 "text" 
 
 name = 
 
 "address" 
 
 row = 
 
 "3" 
 
 & gt; & lt; / textarea & gt; 
                    
 & lt; / div & gt; 
                    
 & lt; button 
 
 type = 
 
 "button" 
 
 class = 
 
" btn btn-primary "
 
 id = 
 
" btnUpdateSubmit "
 
 & gt; 
 Cập nhật 
 & lt; / button & gt; 
                    
 & lt; button 
 
 type = 
 
 "button" 
 
 class = 
 
" btn btn-risk float-right "
 
 data-remove = 
 
" modal "
 
 & gt; 
 Đóng 
 & lt; / button & gt; 
                
 & lt; / form & gt; 


            
 & lt; / div & gt; 

        
 & lt; / div & gt; 
    
 & lt; / div & gt; 
 & lt; / div & gt; 
 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Sau đó, mã PHP của chúng tôi bên trong get.php như bạn có thể thấy bên dưới mà tôi mã hóa mảng biến $ row từ truy vấn kết quả.

  
 & lt;? php 
    
 // bao gồm tệp cấu hình 
    
 request_once 
 
 'config.php' 
 
; 

    
 // một biến PHP Super Global được sử dụng để thu thập dữ liệu sau khi gửi từ biểu mẫu 
    
 $ request 
 
 = 
 
 $ _ YÊU CẦU 
 
; 
    
 // xác định ID nhân viên 
    
 $ workerId 
 
 = 
 
 $ request 
 
 [ 
 
 'worker_id' 
 
]; 

    
 // Đặt dữ liệu CHÈN SQL 
    
 $ sql 
 
 = 
 
 "CHỌN * TỪ nhân viên WHERE id = '" 
 < p class = "mf">. 
 
 $ workerId 
 
. 
 
 "'" 
 
; 

    
 // Xử lý truy vấn 
    
 $ results 
 
 = 
 
 $ db 
 
 - & gt; 
 
 truy vấn 
 
 (
 
 $ sql 
 
); 

    
 // Tìm nạp mảng liên kết 
    
 $ row 
 
 = 
 
 $ results 
 
 - & gt; 
 fetch_assoc 
 
 (); 

    
 // Bộ kết quả miễn phí 
    
 $ results 
 
 - & gt; 
 
 free_result 
 
 (); 

    
 // Đóng kết nối sau khi sử dụng nó 
    
 $ db 
 
 - & gt; 
 
 đóng 
 
 (); 

    
 // Mã hóa mảng thành định dạng json 
    
 echo 
 
 json_encode 
 
 (
 
 $ row < / p> 
); 
? & gt; 
 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Sau đó, bây giờ chúng ta sẽ thêm hàm get () mã javascript của chúng ta bên trong scripts.js .

  
 function 
 
 get 
 
 () 
 {
    
 $ 
 
 (
 
 tài liệu 
 
)  
. 
 
 đại biểu 
 
 (
 
 " [data-target = '# edit-worker-modal'] "
 
, 
 
" click "
 
, 
 
 hàm 
 
 () 
 
 {

        
 var 
 
 workerId 
 
 = 
 
 $  
 (
 
 this 
 
) 
 
. 
 
 attr 
 
 (
 
 'data-id' 
 
); 

        
 // Cấu hình Ajax 
        
 $ 
 
. 
 
 ajax 
 
 ({< / p>
            
 loại 
 
: 
 
 "NHẬN" 
 
, 
 
 // chúng tôi đang sử dụng phương thức GET để lấy dữ liệu từ phía máy chủ 
            
 url 
 
: 
 
 'get.php' 
 
, 
 
 // lấy giá trị tuyến 
            
 dữ liệu 
 
: 
 
 {
 
 worker_id  
: 
 
 workerId 
 
}, 
 
 // thiết lập dữ liệu 
            
 beforeSend 
 
: 
 
 function 
 
 () < / p> 
 {
 
 // Chúng tôi thêm nút này trước khi gửi để tắt nút sau khi chúng tôi gửi để ngăn chặn nhiều lần nhấp 

            
}, 
            
 thành công 
 
: 
 
 chức năng 
 
 ( 
 phản hồi 
 
) 
 
 {
 
 / / khi yêu cầu được xử lý thành công tới phía máy chủ, nó sẽ trả về kết quả tại đây 
                
 phản hồi 
 
 = 
 
 JSON 
 
.  
 phân tích cú pháp 
 
 (
 
 phản hồi 
 
) ; 
                
 $ 
 
 (
 
 "# edit-form [name = 
 
 \ "
 
 id 
 
 \" 
 
] " 
) 
 
. 
 
 val 
 
 (< / p> 
 response 
 
. 
 
 id 
 
 ); 
                
 $ 
 
 (
 
 "# edit-form [name = 
 
 \ "
 
 email 
 
 \" 
 
] " 
) 
 
. 
 
 val 
 
 (< / p> 
 phản hồi 
 
. 
 
 email 
 
 ); 
                
 $ 
 
 (
 
 "# edit-form [name = 
 
 \ "
 
 first_name 
 
 \" 
 
] " 
) 
 
. 
 
 val 
 
 (< / p> 
 response 
 
. 
 
 first_name 
 
 ); 
                
 $ 
 
 (
 
 "# edit-form [name = 
 
 \ "
 
 last_name 
 
 \" 
 
] " 
) 
 
. 
 
 val 
 
 (< / p> 
 response 
 
. 
 
 last_name 
 
 ); 
                
 $ 
 
 (
 
 "# edit-form [name = 
 
 \ "
 
 địa chỉ 
 
 \" 
 
] " 
) 
 
. 
 
 val 
 
 (< / p> 
 phản hồi 
 
. 
 
 địa chỉ 
 
 ); 
            
} 
        
}); 
    
}); 
} 
 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Lặp lại phản hồi JSON

Vì bạn đã biết cách hiển thị phản hồi JSON cho trang web của mình. Bây giờ tôi sẽ cung cấp cho bạn một ví dụ về cách lặp lại JSON. Dưới đây là ví dụ ảnh chụp màn hình về việc liệt kê các nhân viên qua ajax với phản hồi JSON.

Trước khi chúng ta đi sâu vào, trước tiên, tôi sẽ chỉ cho bạn mã cơ bản về cách thực hiện. Như bạn có thể thấy trong đoạn mã bên dưới, tôi sử dụng “$ .each (response, function (key, value) {” để lặp lại JSON được phân tích cú pháp.

  
 function 
 
 all 
 
 () 
 {
    
 // Cấu hình Ajax 
    
 $ 
 
. 
 
 ajax 
 
 ({< / p>
        
 loại 
 
: 
 
 "NHẬN" 
 
, 
 
 // chúng tôi đang sử dụng phương thức GET để lấy tất cả bản ghi từ máy chủ 
        
 url 
 
: 
 
 'all.php' 
 
, 
 
 // lấy giá trị tuyến 
        
 thành công 
 
: 
 
 chức năng 
 
 ( 
 phản hồi 
 
) 
 
 {
 
 / / khi yêu cầu được xử lý thành công tới phía máy chủ, nó sẽ trả về kết quả tại đây 

            
 // Phân tích cú pháp kết quả json 
            
 phản hồi 
 
 = 
 
 JSON 
 
.  
 phân tích cú pháp 
 
 (
 
 phản hồi 
 
) ; 

            
 nếu 
 
 (
 
 phản hồi 
 
.  
 length 
 
) 
 
 {
                
 $ 
 
. 
 
 each 
 
 ( 
 response 
 
, 
 
 function 
 
 ( 
 
 key 
 
, 
 
 value 
 
) 
 
 {
                    
 bảng điều khiển 
 
. 
 
 log 
 
 ( 
 value 
 
. 
 
 first_name 
 
 + 
 
 "" 
 
 + 
 
 giá trị 
 
. 
 
 last_name 
 
); 
                
}); 
            
} 
        
} 
    
}); 
} 
 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Vui lòng kiểm tra kết quả bảng điều khiển bên dưới của đoạn mã trên.

Vì vậy, đó là cách cơ bản về cách lặp JSON. Vì vậy, chúng tôi sẽ áp dụng trước bằng cách hiển thị danh sách nhân viên sử dụng nhóm danh sách bootstrap như bạn có thể thấy kết quả bên dưới:

Bây giờ hãy làm mã. Trước tiên, hãy thiết lập mã HTML của chúng tôi bên trong index.html .

  
 & lt; div 
 
 class = 
 
 " col-md-8 "
 
 & gt; 
    
 & lt; h3 & gt; 
 Danh sách nhân viên 
 & lt; / h3 & gt; 
    
 & lt; div 
 
 id = 
 
 "danh sách nhân viên" 
 
 & gt; & lt; / div & gt; 
 & lt; / div & gt; 
 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Sau đó, tiếp theo Mã PHP của chúng tôi bên trong all.php .

  
 & lt;? php 
    
 // bao gồm tệp cấu hình 
    
 request_once 
 
 'config.php' 
 
; 

    
 // Câu lệnh SQL 
    
 $ sql 
 
 = 
 
 "CHỌN * TỪ nhân viên" 
 
; 

    
 // Xử lý truy vấn 
    
 $ results 
 
 = 
 
 $ db 
 
 - & gt; 
 
 truy vấn 
 
 (
 
 $ sql 
 
); 

    
 // Tìm nạp mảng liên kết 
    
 $ row 
 
 = 
 
 $ results 
 
 - & gt; 
 
 fetch_all 
 
 (
 
 MYSQLI_ASSOC 
 
); 

    
 // Bộ kết quả miễn phí 
    
 $ results 
 
 - & gt; 
 
 free_result 
 
 (); 

    
 // Đóng kết nối sau khi sử dụng nó 
    
 $ db 
 
 - & gt; 
 
 đóng 
 
 (); 

    
 // Mã hóa mảng thành định dạng json 
    
 echo 
 
 json_encode 
 
 (
 
 $ row < / p> 
); 
? & gt; 
 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Sau đó, bây giờ hãy viết mã javascript để lặp lại kết quả của nhân viên thông qua ajax. Bạn sẽ tìm thấy mã này bên trong scripts.js với tất cả các hàm ().

  
 function 
 
 all 
 
 () 
 {
    
 // Cấu hình Ajax 
    
 $ 
 
. 
 
 ajax 
 
 ({< / p>
        
 loại 
 
: 
 
 "NHẬN" 
 
, 
 
 // chúng tôi đang sử dụng phương thức GET để lấy tất cả bản ghi từ máy chủ 
        
 url 
 
: 
 
 'all.php' 
 
, 
 
 // lấy giá trị tuyến 
        
 thành công 
 
: 
 
 chức năng 
 
 ( 
 phản hồi 
 
) 
 
 {
 
 / / khi yêu cầu được xử lý thành công tới phía máy chủ, nó sẽ trả về kết quả tại đây 

            
 // Phân tích cú pháp kết quả json 
            
 phản hồi 
 
 = 
 
 JSON 
 
.  
 phân tích cú pháp 
 
 (
 
 phản hồi 
 
) ; 

            
 var 
 
 html 
 
 = 
 
 "" < / p> 
; 
            
 // Kiểm tra xem có bản ghi nào không 
            
 nếu 
 
 (
 
 phản hồi 
 
.  
 length 
 
) 
 
 {
                
 html 
 
 + = 
 
 '& lt; div class = "list-group" & gt;' < / p> 
; 
                
 // Lặp lại JSON đã phân tích cú pháp 
                
 $ 
 
. 
 
 each 
 
 ( 
 response 
 
, 
 
 function 
 
 ( 
 
 key 
 
, 
 
 value 
 
) 
 
 {
                    
 // Mẫu danh sách nhân viên của chúng tôi 
                    
 html 
 
 + = 
 
 '& lt; a href = "#" class = "list-group -item list-group-item-action "& gt; '
 
; 
                    
 html 
 
 + = 
 
 "& lt; p & gt;" 
 
 + 
 
 giá trị 
 
. 
 
 first_name 
 
 + 
 
 '' 
 
 + 
 
 giá trị 
 
. 
 
 last_name 
 
 + 
 
 "& lt; span class = 'list-email' & gt; ("
 
 + 
 
 value 
 
 . 
 
 email 
 
 + 
 
 ") & lt; / span & gt;"  
 + 
 
 "& lt; / p & gt;" 
 
; 
                    
 html 
 
 + = 
 
 "& lt; p class = 'list-address' & gt;" < / p> 
 + 
 
 giá trị 
 
. 
 
 địa chỉ 
 
 + 
 
 "& lt; / p & gt;" 
 
; 
                    
 html 
 
 + = 
 
 "& lt; button class = 'btn btn-sm btn-primary mt -2 'data-toggle =' modal 'data-target =' # edit-worker-modal 'data-id =' "
 
 + 
 
 giá trị 
 
. 
 
 id 
 
 + 
 
 "'& gt; Chỉnh sửa & lt; / nút & gt;" 
 
; 
                    
 html 
 
 + = 
 
 "& lt; button class = 'btn btn-sm btn-risk mt -2 ml-2 btn-delete-staff 'data-id =' "
 
 + 
 
 value 
 
. 
 
 id 
 
 + 
 
 "'typle =' nút '& gt; Xóa & lt; / nút & gt; "
 
; 
                    
 html 
 
 + = 
 
 '& lt; / a & gt;' 
 
; 
                
}); 
                
 html 
 
 + = 
 
 '& lt; / div & gt;' 
 
; 
            
} 
 
 else 
 
 {
                
 html 
 
 + = 
 
 '& lt; div class = "alert alert-warning" & gt;' 
 
; 
                  
 html 
 
 + = 
 
 'Không tìm thấy bản ghi nào!' 
 
; 
                
 html 
 
 + = 
 
 '& lt; / div & gt;' 
 
; 
            
} 

            
 // Chèn Mẫu HTML và hiển thị tất cả hồ sơ nhân viên 
            
 $ 
 
 (
 
 "# nhân viên-danh sách" 
 
) 
 
. 
 
 html 
 
 (
 
 html 
 
); 
        
} 
    
}); 
} 
 

Vào chế độ toàn màn hình

Thoát chế độ toàn màn hình

Bây giờ bạn đã có nền tảng về Phản hồi JSON từ phía máy chủ của mình. Tôi hy vọng hướng dẫn này có thể giúp bạn. Vui lòng truy cập vào đây https://codeanddeploy.com/blog/php/how-to-return-json-response-in-php-mysql-using-ajax-and-jquery nếu bạn muốn tải xuống mã này.

Cảm ơn bạn đã đọc. Chúc bạn mã hóa thành công!