Xem bài viết JSON một phần không thể thiếu với web developer

JSON một phần không thể thiếu với web developer

Oct 28, 2012Php & MySQL
Trong PHP có xây dựng phương thức có chức năng chuyển đổi giữa một mảng kết hợp thành đối tượng JSON và ngược lại. Điều này cho phép các web developer dùng AJAX để yêu cầu dữ liệu từ máy chủ và gửi lại kịch bản phía khách hàng.
Trước khi bắt đầu vào biết viết thì mình cùng xem qua demo ở trên để biết mình sẽ làm gì nhé.
Trong bài này mình cần 3 file đó là:
index.php : đây là file chạy chính của mình gồm 1 form và đoạn code Javascript để chạy JSON.
json.php : đây là file sẽ xử lý mã PHP sau đó trả về cho client JSON để hiển thị lên các input của form.
mystyle.css : đây là file chứa mã CSS, dùng định dạng cho trang.
Bây giờ mình sẽ xem nội dung của từng trang nhé và đầu tiên là trang chính của chúng ta: index.php

1. TRANG INDEX.PHP

Trong trang này có 2 phần chính là phần HTML và phần Javascript. Phần HTML sẽ chứa 1 form gồm các thẻ input để hiển thị dữ liệu từ JSON và các thẻ a dùng để load dữ liệu của các phần khác nhau thông qua giá trị val của nó. Và cuối cùng là thẻ div với class="clr" dùng để clear float của phần ul li phía trên. Trong phần này các bạn cần chú ý đến id của các thẻ HTML và phần val trong các thẻ a.
Tiếp theo là phần Javascript dùng để gán dữ liệu sau khi load json từ file json.php, trong đoạn code này mình có chú thích cho các bạn và nội dung file như sau:
	$(document).ready(function() {
			
			// SỰ KIỆN CHO THẺ A TRONG LI
			$("#lstVal li a").bind("click", function() {
	 
				// LẤY GIÁ TRỊ VAL CỦA THẺ A VÀ ĐƯA VÀO URL
				var val = $(this).attr('val');
				var formContent = "action=get_json&number=" + val;
				
				// DÙNG getJSON() ĐỂ LẤY GIÁ TRỊ TRẢ VẾ
				$.getJSON("json.php", formContent, function(json) {
					
					// GÁN GIÁ TRỊ TRONG JSON VÀO CÁC INPUT CỦA MÌNH
					$("#yourname").val(json.yourname);
					$("#email").val(json.email);
					$("#message").val(json.message);
				});
			});
		});

2. TRANG JSON.PHP

Trang này chỉ đơn giản là mình nhận dữ liệu được gởi qua từ trang index.php, xử lý sau đó trả về đối tượng JSON cho trang index.php. Nội dung file json.php như sau:
	
	// Kiểm tra action được gởi đến, nếu đúng như thế thì mới xử lý tiếp
	if ($_GET['action'] == 'get_json') 
	{
		$item = loadJsonInfo($_GET['number']);
		echo $item;
	}
	 
	 // Phương thức load thông tin và chuyển thành JSON
	function loadJsonInfo($number)
	{
		$array = array();
		switch ($number) {
			case 1:
				$array['yourname']  = '2Cwebvn';
				$array['email'] = '2cwebvn@gmail.com';
				$array['message'] = '2Cwebvn - Web Design & Development! I love 2Cwebvn, bla..bla..';
				break;
			case 2:
				$array['yourname']  = 'Thiết Kế Web';
				$array['email'] = 'thietkeweb@2cweb.vn';
				$array['message'] = 'Thiết kế web 2Cwebvn';
				break;
			case 3:
				$array['yourname']  = 'Bộ nhận dạng thương hiệu';
				$array['email'] = 'nhandang.thuonghieu@2cweb.vn';
				$array['message'] = 'Bộ nhận dạng thương hiệu 2Cwebvn';
				break;
		}
		
		// Chuyển mảng dữ liệu thành Json và trả nó về
		$json = json_encode($array); 
		return $json;
	}			
	

2. TRANG MYSTYLE.CSS

File mystyle.css dùng để định dạng các thành phần trong trang, phần đầu tiên sẽ reset style mặc định của trình duyệt sau đó là định dạng trang và các thẻ HTML.
	/*====== RESET STYLE VÀ THIẾT LẬP THÔNG SỐ MẶC ĐỊNH CHO CÁC THẺ HTML ======*/
	*{margin:0px; padding:0px}
	body{
		margin:0px auto; width:900px; 
		font: bold 13px "Times New Roman";
	}
	ul{margin:20px auto 0px;}
	ul li{ list-style:none; margin:0 10px; width:82px; float:left;}
	ul li a{ border:1px solid #ccc; padding:3px 5px; color: #DB2E66;}
	ul li a:hover,ul li a:active{color: #003;}

	a{ color:#514448; 	text-decoration:none; }
	a.back{ font-size:15px; color:#00F; }
	a:HOVER{ color: #DB2E66; }

	h1{ color: #DB2E66; width:440px; margin:50px 0px 50px;}
	h2{ color: #DB2E66; margin:0px auto;}
	.clr{clear:both;}

Tiếp theo sẽ là phần định dạng cho trang và form trong trang.
	
	/*====== ĐỊNH DẠNG CHO PHẦN NỘI DUNG VÀ FORM ======*/
	#content{
		margin:10px auto; padding:10px;
		width:320px; border:1px solid #ccc;
	}

	#myform{ margin:15px 0px 0px;}
	label{display:block;}
	input, textarea{
		width:290px; margin-bottom:10px; outline:none; 
		border:1px solid #DB2E66; padding:3px 5px;
	}
		
Và cuối cùng đừng quên thêm thư viện jQuery vào nhé:
	<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
Thế là xong và đây là kết quả sau khi làm xong:
JSON một phần không thể thiếu với web developer - 2Cwebvn

Kết luận

Bạn có thích bài viết này không? Nếu có hãy giúp mình like bài viết này nhé hoặc bạn có thể chia sẽ bài này đến những người mà bạn nghĩ họ quan tâm, xin cảm ơn!

Mọi ý kiến đóng góp hay thắc mắc bạn có thể gởi về cho chúng tôi qua form bình luận phía dưới. Cám ơn bạn đã ghé thăm web mình và xin chúc bạn thành công!

Nguồn: 2Cweb.vn

 

Leave a Comments