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ả