Cách phân tích phản hồi AJAX trong JavaScript

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 & MySQL bằng cách sử dụng Ajax & 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ó cho 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

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

 

Và đây là kết quả khi thực thi nó trên trình duyệt

 

Tích hợp AJAX

Để tích hợp ajax, chúng tôi cần tạo một nút đơn giản trong chỉ mục của mình. html thì một hàm ajax đơn giản để truyền đạt mã cơ bản ở trên. php

 

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

Basic JSON Response

 

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

function basic() 
{
	$(document).delegate("#btnBasicResponse", "click", function() {

		// Ajax config
		$.ajax({
	        type: "GET", //we are using GET method to get data from server side
	        url: 'basic.php', // get the route value
	        success: function (response) {//once the request successfully process to the server side it will return result here
	            console.log(response)
	        }
	    });

	});
}

 

Sau đó, nếu chúng ta 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ã dưới đây

function basic() 
{
	$(document).delegate("#btnBasicResponse", "click", function() {

		// Ajax config
		$.ajax({
	        type: "GET", //we are using GET method to get data from server side
	        url: 'basic.php', // get the route value
	        success: function (response) {//once the request successfully process to the server side it will return result here
	            //parse json
	            response = JSON.parse(response);

	            console.log(response)
	        }
	    });

	});
}

Như bạn có thể thấy, chúng tôi thêm một dòng mã mới "response = JSON. phân tích cú pháp (phản hồi);". 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, nó hiện có thể nhấp được 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 ta sẽ hiển thị JSON theo thuộc tính giống như nếu bạn chỉ muốn hiển thị giá trị first_name. Đây là bản cập nhật mã dưới đây

function basic() 
{
	$(document).delegate("#btnBasicResponse", "click", function() {

		// Ajax config
		$.ajax({
	        type: "GET", //we are using GET method to get data from server side
	        url: 'basic.php', // get the route value
	        success: function (response) {//once the request successfully process to the server side it will return result here
	            //parse json
	            response = JSON.parse(response);

	            console.log(response);
	            console.log("First Name:" + response.first_name);
	        }
	    });

	});
}

 

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("Tên. " + phản hồi. first_name);" bây giờ trong mã này, chúng tôi chỉ truy cập 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 bên dưới

Basic JSON Response

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

function basic() 
{
	$(document).delegate("#btnBasicResponse", "click", function() {

		// Ajax config
		$.ajax({
	        type: "GET", //we are using GET method to get data from server side
	        url: 'basic.php', // get the route value
	        success: function (response) {//once the request successfully process to the server side it will return result here
	            //parse json
	            response = JSON.parse(response);

	            $("#json_first_name").html("First Name: " + response.first_name);
	        }
	    });

	});
}

Như bạn có thể thấy ở trên, tôi thêm dòng mã mới "$("#json_first_name"). html("Tên. " + phản hồi. tên đầu tiên);". 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 Phản hồi JSON, chúng tôi sẽ triển khai dữ liệu động bằng cách sử dụng PHP & MySQL với Ajax

 

Hiển thị dữ liệu động bằng JSON phản hồi với PHP & 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 chỉ mục. html

	
List of Employees
	

 

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

________số 8_______

 

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, tôi mã hóa mảng biến $row từ truy vấn kết quả

query($sql);

	// Fetch Associative array
	$row = $results->fetch_assoc();

	// Free result set
	$results->free_result();

	// Close the connection after using it
	$db->close();

	// Encode array into json format
	echo json_encode($row);
?>

 

Sau đó, bây giờ chúng ta sẽ thêm hàm get() mã javascript của mình vào bên trong tập lệnh. js

Basic JSON Response

0

 

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ẽ cho bạn một ví dụ về cách lặp JSON. Dưới đây là ví dụ về ảnh chụp màn hình liệt kê 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 JSON được phân tích cú pháp

 

Basic JSON Response

1

 

Vui lòng kiểm tra kết quả giao diện đ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 ta 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 chỉ mục. html

	
List of Employees
	

 

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

Basic JSON Response

3

 

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

Basic JSON Response

4

 

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 bài viết này có thể giúp bạn. Để xem khả năng hành động của mã này, chỉ cần nhấp vào nút "Tải xuống" bên dưới

Làm cách nào để đọc phản hồi JSON ajax trong JavaScript?

Làm cách nào để nhận phản hồi cuộc gọi ajax trong JavaScript?

Làm cách nào để nhận giá trị từ phản hồi ajax trong HTML?

Làm cách nào để hiển thị phản hồi JSON ajax trong HTML?