首先來說明一下為何要想練習使用JSON...迷之音:大家都在討論這個，應該很夯吧
所以就來自己實作一次囉。
大家對於JSON的格式都不陌生，所以在這就先不介紹了
(一)、jQuery & php JSON
函式用法可由
php官網
jQuery官網
上可找到
1)php_json.php
<?php
//先自行設定陣列以及對應的值
$json=array('Name'=>'ivan','Tel'=>12345678,'Title'=>'goodman');
//再由json_encode回覆為json讀取的格式
echo json_encode($json);
?>
可以執行php_json.php這支檔案看一下印出來的格式
{"Name":"ivan","Tel":12345678,"Title":"goodman"}
2)getJSON.html
先在body建立div標籤
<div class="result"></div>
再來就開始編輯JQUERY囉
<script type="text/javascript">
$(document).ready(function(){
$.getJSON("php_json.php", function(data){
$('.result').html('<p>Name:'+data.Name+'</p><p>Tel:'+data.Tel+'</p><p>Title:'+data.Title+'</p>');
})
});
</script>
3)getJSON.html完整程式碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.getJSON("php_json.php", function(data){
$('.result').html('<p>Name:'+data.Name+'</p><p>Tel:'+data.Tel+'</p><p>Title:'+data.Title+'</p>');
})
});
</script>
</head>
<body>
<div class="result"></div>
</body>
</html>
4)另外一種寫法，附上JS片段吧....
<script type="text/javascript">
$(document).ready(function(){
//第一種寫法
$.ajax({
url:'php_json.php',
type:'GET',
dataType:'json',
success: function(data) {
$('.result').html('<p>Name:'+data.Name+'</p><p>Tel:'+data.Tel+'</p><p>Title:'+data.Title+'</p>');
},
error: function() {
alert('錯誤');
}
});
//第二種寫法
// $.getJSON("php_json.php", function(data){
// $('.result').html('<p>Name:'+data.Name+'</p><p>Tel:'+data.Tel+'</p><p>Title:'+data.Title+'</p>');
// });
});
</script>
| 