Trả về JavaScript array khi dùng AJAX JQuery gọi server PHP code

Góc Kinh Nghiệm giả sử bạn muốn dùng JQuery AJAX gọi về server, server thực thi PHP code và trả về một mảng dữ liệu kiểu JavaScript
Chúng ta cần tổng cộng 3 file: 1 file html, 1 file html và 1 file javascript để làm demo cho điều này. Các file này sẽ được đặt cùng một thư mục. Góc Kinh Nghiệm xin hướng dẫn các bạn như sau:

1. Tạo file HTML code(test.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<body>
<h1>Dùng JQuery AJAX gọi server php code và trả về mảng kiểu JavaScript </h1>
</body>
</html>

2. Tạo file PHP code(test.php)

<?php 	
$arr = array("Góc Kinh Nghiệm", "Chia sẻ kinh nghiệm lập trình", "Internet marketing", "SEO", "Cùng góc kinh nghiệm học lập trình", "www.gockinhnghiem.com"); 	
echo '{"js_arr":'.json_encode($arr).'}'; 	
exit(); 
?>

Ở đoạn mã trên, chúng ta khai báo mảng tên là $arr. Những giá trị của mảng $arr sẽ được JavaScript đón nhận lấy. Sau đó, chúng ta echo ra chuỗi “js_arr”, chuỗi này là tên cho chúng ta sử dụng phía JavaScript. Hàm json_encode biến đổi mảng $arr sang dạng JSON, giúp cho JavaScript hiểu được
3. Tạo file JavaScript chứa code gọi về server(test.js)

$('document').ready(function(){
 $.ajax({		
         type: "GET",
         url: "test.php",
         dataType: "json", 		
         success: function(data){			
               var js_arr = data.js_arr;			
               for(var i=0; i<js_arr.length; i++){
                       alert(js_arr[i]);			
               }		
         },
         error: function(){
	        alert("Lỗi");		
         }
 });
});

Đoạn mã JavaScript của chúng ta chỉ đơn giản là triệu gọi về server khi trang web của chúng ta ở trạng trái “ready”. Sau khi triệu gọi về server thành công thì chúng ta có được những giá trị từ mảng $arr của php code ở phần 2. Và công việc kế tiếp là alert lên những giá trị đó. Còn nếu triệu gọi về server thất bại thì alert lên “Lỗi”
4. Kết quả đạt được nếu chạy ổn
Nếu code của các bạn chạy được thì chúng ta có kết quả như hình bên dưới

Chúc các bạn thành công :D


Leave a Reply

Your email address will not be published. Required fields are marked *