jQuery请求json格式数据并渲染页面

IT帮

已于 2022-04-06 12:44:38 修改

阅读量5.1k

点赞数 4

于 2019-05-13 22:34:38 首次发布

本文链接：https://blog.csdn.net/python183360/article/details/90182951

版权

Jquery 同时被 2 个专栏收录

5 篇文章 1 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

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>
<div id="test"></div>
<script src="https://code.jquery.com/jquery-3.0.0min.js"></script>
<script>
		$(function(){
			$.ajax({
				//请求方式
				type:"GET",
				//文件位置
				url:"data.json",
				//返回数据格式为json,也可以是其他格式如
				dataType:"json",
				//请求成功后要执行的函数，拼接html
				success:function(data){
				var atr="<ul>";
				$.each(data,function(i, n){
					var 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页面引入了

接下来就是后者了
后者就是直接从数据库获取数据，并且输出json格式的数据
例如命名为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,20");
$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会直接跟前者一样，只是一个是在数据库获取，一个是在本地获取

IT帮

关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
1
评论
jQuery请求json格式数据并渲染页面

json格式的数据文件有两种方式一种是xxx.json文件一种是xxx.php文件前者是json格式的文件后者是输出json格式的文件前者是本地的文件前者是本地的文件后者是获取数据库的数据在输出json格式的php文件先说前者例如有一个json格式的文件data.json[{'id':'001','title':'百度','url':'http://www.baidu...
复制链接

扫一扫