Kết hợp sử dụng json (AJAX) với jQuery và php

Đăng bởi phucvh trong mục Hướng dẫn vào 18 tháng 10, 2010 | Comments

Khi các bạn lập trình một website, AJAX trong jQuery đuợc sử dụng rất phổ biến và dữ liệu trả về trong 1 function ajax cũng có rất nhiều loại, có thể là dạng "html, text, script, xml, json", sau đây mình xin giới thiệu về cách sử dụng JSON và đa số các lập trình viên hiện nay đang dùng giúp cho việc parse dữ liệu dễ dàng và đẹp.

1. JSON là gì ?

  • Là 1 định dạng trao đổi dữ liệu
  • Là 1 phuơng thức thông dụng cho việc truyền dữ liệu giữa các máy với nhau (Client-Server)

2. Các phuơng thức hỗ trợ và tự động phân tích JSON trong jQuery

  • jQuery.getJSON()
  • jQuery.ajax()
  • jQuery.get()
  • jQuery.post()

3. Lời khuyên khi dùng JSON

  • Không nên sử dụng jQuery.getJSON(); (kinh nghiêm cho thấy bạn sử dụng sẽ rất khó để tùy biến, về chi tiết bạn có thể xem tại "jQuery getJSON" của jQuery.com
  • Không nên và đừng bao giờ set 1 option "type" hay "dataType" là kiểu 'json'
  • JSON trong php trả về 1 string nên đơn giản trong jQuery bạn chỉ cần dùng hàm $.parseJSON(data) (cái này mình sẽ nói chi tiết hơn trong phần ví dụ)

4. Ví dụ đơn giản sử dụng JSON trong jQuery có kết hợp với PHP

Yêu cầu đặt ra: viết 1 hàm view thông tin của thành viên gồm có "username, password, email" có sử dụng Ajax.
Giải pháp: sử dụng jquery(ajax, json) + php

A. Bạn tạo 1 file có tên là "getMember.php", file này có thể đặt bất cứ đâu miễn là chạy đuợc PHP
  • "getMember.php" chứa tòan bộ code có xử lý phía PHP và gồm luôn cả phần ajax, mình viết này cho các bạn tiện hình dung.
  • Phiên bản jQuery mình sử dùng là 1.4.2 từ google code
B. Nội dung chính:
1. Xử lý PHP:
  • tạo 1 biến baseURL để lấy url hiện tại của file đang chạy
  • dùng $_POST để check request từ client(sử dụng ajax)
  • sleep(1) //tam thời cho stop 1 giay rùi chạy tiếp => cái này để các bạn có thể nhìn thấy rõ quá trình xử lý
  • tạo ra 1 mảng member có chứa thông tin của thành viên
  • dùng hàm json_encode(), mục đích là chuyển mảng vừa tạo thành chuỗi json trả về cho phía Client
  • sau đó là die: kết thúc ko chạy nữa (stop mọi quá trình sau khi đã trả về dữ liệu)
//get URL cua file hien tai; 
$baseUrl = $_SERVER['PHP_SELF'];

//kiem tra thong tin request den
if (isset($_POST['getMember']) && $_POST['getMember'] == 'view')
{
    //wating 1s truoc khi thuc thi
    sleep(1);
    
    //tao mang member
    $member = array('username' => 'phucvh'
                   ,'password' => '123456'
                   ,'email' => 'ahoangphuc@gmail.com');
                   
   //dung ham json_encode de chuyen mang $member thanh chuoi JSON
   echo json_encode($member);
   
   //ket thuc tra ve du lieu va stop khong cho chay tiep
   die;
}
2. Xử lý Ajax

Các bạn nếu chưa biết rõ về ajax trong jQuery có thể tìm hiểu (google: jquery + ajax)
Trong hàm xử lý ajax bạn phải đảm bảo các yếu tố sau:

  • url: đuờng dẫn file php sẽ xử lý yêu cầu của bạn
  • type: kiểu dữ liệu bạn gửi lên Server (POST, GET)
  • data: dữ liệu bạn gửi lên là gì? (getMember= view)
  • success: khi server xử lý thành công sẽ trả về ở đây, tai đây bạn sẽ xử lý phân tích chuỗi JSON, và điền dữ liệu vào các textbox.

=> dùng hàm $.parseJSON(string) để phân tích chuỗi JSON, trong đó string là khối dữ liệu trả về từ phía Server.

$(document).ready(function(){
	// Gắn sự kiện onclick vào #viewbtn
	$('#viewbtn').click(function() {
		$('#loading').html('Loading...');
		var strURL = $('#base_url').val();
		$.ajax({
			url: strURL,
			type: 'POST',
			cache: false,
			data: 'getMember=view',
			success: function(string){
			
				/**
				 * Kiểu mặc định trả về là dạng String, bạn dùng hàm parseJSON để phân tích dữ liệu trả về
				 * có 2 cách parse JSON là : JSON.parse() và $.parseJSON();
				 * 1. var getData = JSON.parse(string);
				 * 2. var getData = $.parseJSON(string);
				**/
				var getData = $.parseJSON(string);
				//input dữ liệu lấy về từ server vào textbox
				$('#txt_username').val(getData.username);
				$('#txt_password').val(getData.password);
				$('#txt_email').val(getData.email);
				
				//Trả loading về trạng thái ban đầu
				$('#loading').html(' ');
			},
			error: function (){
				alert('Có lỗi xảy ra');
			}
		});
	});
	
	// Gắn sự kiện onclick vào #resetbtn
	$('#resetbtn').click(function() {
		$('input:text').val(''); // xóa hết dữ liệu trong textbox
	});
});
3. Các lưu ý :
  • Đảm bảo rằng URL bạn cung cấp trong xử lý ajax của bạn là đúng đuờng dẫn file PHP xử lý.
  • Dữ liệu trả về phía Client luôn là 1 chuỗi (string)

Bạn có thích bài viết này?

phucvh's picture

phucvh

i'm php developer, i have used zend framework in my project
i like football and listening to music in my free time

Facebook: http://facebook.com/phucvh

Trang chủ - Twitter