首先來說明一下為何要想練習使用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> 
  
  
  |