ajax返回json数据格式在页面显示-IT技术网站

ajax返回json数据格式在页面显示

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获取数据
<!DOCTYPEhtml>
<htmllang=”en”>
<head>
<metacharset=”UTF-8″>
<title>ajax请求json数据</title>
</head>
<body>
<divid=”test”></div>
<scriptsrc=”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){
varstr=”<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页面引入了
<scriptsrc=”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(“SETNAMESUTF8”);
//查询数据库
mysql_select_db($db,$con);
//获取最新的10条数据
$result=mysql_query(“SELECTid,resname,imgurl,resint,resurl,pageviewFROM$restbORDERBYidDESCLIMIT0,10″);
$results=array();
while($row=mysql_fetch_assoc($result)){
$results[]=$row;
}
//将数组转成json格式
echojson_encode($results);
//关闭连接
mysql_free_result($result);
mysql_close($link);
echo$json;
?>
因为涉及到链接数据库，我把数据库地址、账号、密码、数据库名、表名都写到了一个config.php里面直接在api.php引入。
config.php
<?php
//配置文件-BYTANKING
//下面是连接数据库主机、用户名、密码、数据库名、表名
$host=”localhost”;
$username=”root”;
$password=”root”;
$db=”list”;
$restb=”reslist”;
?>
访问api.php会直接输出前者的json格式数据
所以跟前者一样，只是一个是在数据库获取，一个是在本地获取
我们要注意这段，api.php一定要声明这是一个json格式的数据，否则无法解析。
header(“content-type:application/json”);