Home »

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

10 thg 9, 2013

Bạn đã nghe mọi người nói về cách sử dụng JSON trong PHP chưa nhỉ? Có thể nói JSON một phần không thể thiếu với web developer, thông thường một nhà phát triển web sẽ sử dụng JSON để cho phép Javascript nói chuyện với PHP tức là gửi dữ liệu từ máy khách đến máy chủ. Hôm nay 2Cwebvn sẽ làm ví dụ cơ bản nho nhỏ để nói về vấn đề này.


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

Bạn đã nghe mọi người nói về cách sử dụng JSON trong PHP chưa nhỉ? Có thể nói JSON một phần không thể thiếu với web developer, thông thường một nhà phát triển web sẽ sử dụng JSON để cho phép Javascript nói chuyện với PHP tức là gửi dữ liệu từ máy khách đến máy chủ. Hôm nay 2Cwebvn sẽ làm ví dụ cơ bản nho nhỏ để nói về vấn đề này.
 
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 để biết mình sẽ làm gì nhé.
 
demo download

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.
 
?
source code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="content">
<h2> LOAD JSON</h2>
<hr width="100%">
<form name="myform" id="myform" method="post" action="">
<label>Your name</label>
<input type="text" name="yourname" id="yourname">
<label>Email</label>
<input type="text" name="email" id="email">
<label>Message</label>
<textarea name="message" id="message" rows="3"></textarea>
</form>
<ul id="lstVal" class="lstVal">
<li><a href="#" val="1">Load json 1</a></li>
<li><a href="#" val="2">Load json 2</a></li>
<li><a href="#" val="3">Load json 3</a></li>
</ul>
<div class="clr">
</div>
</div>

 
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:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(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:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// 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.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*====== 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.
?
1
2
3
4
5
6
7
8
9
10
11
/*====== ĐỊ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é:
 
?
source code
1
<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:
 
 
Kết luận
Bạn có thích bài hướng dẫn 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, 2Cweb.vn xin cảm ơn!
Tags:

Comments[ 0 ]


Đăng nhận xét