jQuery+Ajax+js请求json格式数据并渲染到html页面

最新推荐文章于 2023-12-18 14:46:35 发布

Pandora_417

最新推荐文章于 2023-12-18 14:46:35 发布

阅读量1.6k

点赞数

分类专栏： json

本文链接：https://blog.csdn.net/Pandora_417/article/details/98599769

版权

json 专栏收录该内容

7 篇文章 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>  
<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/jquery-3.0.0.min.js"></script>

接下来就是后者了
后者就是直接从数据库获取数据，并且输出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会直接输出前者的json格式数据
所以跟前者一样，只是一个是在数据库获取，一个是在本地获取

我们要注意这段，api.php一定要声明这是一个json格式的数据，否则无法解析。

header(“content-type:application/json”);

效果：
在这里插入图片描述

原文链接：https://blog.csdn.net/weixin_39927850/article/details/79113006

Pandora_417

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录