2010年11月16日 星期二

jQuery.getJSON() 的用法:搭配PHP使用

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

請多指教^^
張貼者： 於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)