01/10/2018, 17:29

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 ...

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


Bài liên quan

[WEB] Tìm kiếm trên dữ liệu cột trên Datatable sử dụng Ajax Jquery

Bài viết hôm nay, mình sẽ hướng dẫn các bạn cách tìm kiếm ajax jquery trên DataTable , khi chọn dữ liệu thì sẽ load ajax, bài viết này mình tham khảo trên trang webslesson , thấy rất hay, nên chia sẽ lại cho các bạn. Hy vọng bài viết sẽ có ích cho ...

Tạ Quốc Bảo viết 00:46 ngày 02/10/2018

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 ...

Bùi Văn Nam viết 17:29 ngày 01/10/2018

Cách bảo vệ tài khoản khi dùng ứng dụng Web

Hàng ngàn ứng dụng Web ngày nay đã ra đời phục vụ mọi hoạt động sống của con người. Với sự tiện lợi mà vô vàn các ứng dụng Web đang mang lại cho người dùng, mọi hoạt động giao dịch giờ đây trở lên rất thuận tiện và dễ dàng. Vậy làm thế nào để có thể bảo vệ tài khoản cá nhân của mình ...

Tạ Quốc Bảo viết 15:34 ngày 18/09/2018

[JavaScript] Tự xây dựng Promise/Defer với 100 dòng code

Sau vài tháng vọc vạch về mảng Infrastructure hôm nay bỗng thấy nhớ JavaScript, nên là quyết định tháng này làm 1 bài về JS cho đỡ nhớ </p>
         <div class= Hoàng Hải Đăng viết 17:00 ngày 12/08/2018

Bàn về ajax. Nên sử dụng ajax khi nào ? Dùng ajax có tốt hay không ?

Cách vài hôm lại viết một bài ngại ghê hihi. :v Hôm nay, chúng ta sẽ bàn luận 1 chút về ajax các điểm tốt, xấu của ajax để chúng ta có thể sử dụng chúng sao cho hợp lý nhé. Trước hết mình sẽ giới thiệu qua 1 chút. Ajax là gì ? Hiểu nôm na thì ajax là một thuật ngữ mô tả việc sử dụng một vài ...

Tạ Quốc Bảo viết 14:29 ngày 12/08/2018
0