jQuery Ajax js請求json格式資料並渲染到html頁面

                                    

json格式的資料檔案有兩種方式
一種是xxx.json檔案
一種是xxx.php檔案
前者是json格式的檔案
後者是輸出json格式的檔案
前者是本地的檔案
後者是獲取資料庫的資料再輸出成json格式的php檔案
先說前者
例如有一個json格式的檔案
data.json

[  
    {  
    "id":"001",  
    "title":"百度",  
    "url":"http://www.baidu.com"  
    },  
    {  
    "id":"002",  
    "title":"阿里",  
    "url":"www.alibaba.com"  
    },  
    {  
    "id":"003",  
    "title":"騰訊",  
    "url":"www.qq.com"  
    }  
]  

通過ajax.html獲取資料

<!DOCTYPE html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <title>ajax請求json資料</title>    
</head>    
<body>    
<div id="test"></div>    
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>  
<script>    
    $(function(){    
        $.ajax({    
            //請求方式    
            type:"GET",    
            //檔案位置    
            url:"data.json",  
            //返回資料格式為json,也可以是其他格式如    
            dataType: "json",    
            //請求成功後要執行的函式,拼接html    
            success: function(data){    
                var str="<ul>";    
                $.each(data,function(i,n){    
                    str ="<li>" "ID:" n.id "</li>";  
                    str ="<li>" "標題:" n.title "</li>";  
                    str ="<li>" "地址:" n.url "</li>";  
                });    
                str ="</ul>";    
                $("div").append(str);    
            }    
        });    
    });    
</script>    
</body>    
</html>

html頁面引入了
<script src=”https://code.jquery.com/jquer…;></script>

到這裡,通過ajax.html吧data.json資料給渲染到頁面了。

下面將以下從資料庫獲取資料並且渲染到html頁面
例如命名為api.php,這個頁面主要是查詢資料庫

<?php  
header("content-type:application/json");  
//獲取資料庫配置  
require_once("config.php");  
//連線資料庫  
$con = mysql_connect($host,$username,$password);  
if (!$con)  
  {  
  die('連線資料庫失敗,失敗原因:' . mysql_error());  
  }  
//設定資料庫字符集    
mysql_query("SET NAMES UTF8");  
//查詢資料庫  
mysql_select_db($db, $con);  
//獲取最新的10條資料  
$result = mysql_query("SELECT id,resname,imgurl,resint,resurl,pageview FROM $restb ORDER BY id DESC LIMIT 0,10");  
$results = array();  
while ($row = mysql_fetch_assoc($result)) {  
$results[] = $row;  
}  
// 將陣列轉成json格式  
echo json_encode($results);  
// 關閉連線  
mysql_free_result($result);  
mysql_close($link);  
echo $json;  
?>  

因為涉及到連結資料庫,我把資料庫地址、賬號、密碼、資料庫名、表名都寫到了一個config.php裡面直接在api.php引入。
config.php

<?php  
//配置檔案 - BY TANKING  
//下面是連線資料庫主機、使用者名稱、密碼、資料庫名、表名  
$host="localhost";  
$username="root";  
$password="root";  
$db="list";  
$restb="reslist";  
?>  

訪問api.php會直接輸出前者的json格式資料
所以跟前者一樣,只是一個是在資料庫獲取,一個是在本地獲取
我們要注意這段,api.php一定要宣告這是一個json格式的資料,否則無法解析。
header(“content-type:application/json”);

效果:

關聯文章