jQuery中读取json文件示例代码

最新推荐文章于 2024-08-02 04:03:02 发布

AspNetSunny

最新推荐文章于 2024-08-02 04:03:02 发布

阅读量643

点赞数 1

分类专栏： Json 文章标签： json

本文链接：https://blog.csdn.net/sunnywuxian/article/details/49447659

版权

Json 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.首先建一个JSON格式的文件userinfo.json 保存用户信息。如下:

[
    {
        "name":"张国立",
        "sex":"男",
        "email":"zhangguoli@123.com"
    },
    {
        "name":"张铁林",
        "sex":"男",
        "email":"zhangtieli@123.com"
    },
    {
        "name":"邓婕",
        "sex":"女",
        "email":"zhenjie@123.com"
    }
]

2.其次建一个页面用于获取JSON文件里的用户信息数据，并显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>getJSON获取数据</title>

    <script src="../js/jquery-1.8.3.min.js"></script>
<style type="text/css">
#divframe{ border:1px solid #999; width:500px; margin:0 auto;}
.loadTitle{ background:#CCC; height:30px;}
</style>
<script type="text/javascript">
    $(function () {
        $("#btn").click(function () {
            $.getJSON("userinfo.json", function (data) {
                var $jsontip = $("#jsonTip");
                $jsontip.empty();//清空内容

                var strHtml = "";//存储数据的变量

                $.each(data, function (infoIndex, info) {
                    strHtml += "Name：" + info["Name"] + "<br>";
                    strHtml += "<hr>"
                })
                $jsontip.html(strHtml);//显示处理后的数据
            })
        });

    })
</script>
</head>
<body>
<div id="divframe">
    <div class="loadTitle">
        <input type="button" value="获取数据" id="btn"/>
    </div>
    <div id="jsonTip">
    </div>
</div>
</body>
</html>

3. $.getJSON函数讲解

通过 HTTP GET 请求JSON数据

语法

jQuery.getJSON(url,data,success(data,status,xhr))

参数	描述
url	必需。规定将请求发送的哪个 URL。
data	可选。规定连同请求发送到服务器的数据。
success(data,status,xhr)	可选。规定当请求成功时运行的函数。额外的参数： response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象

参数

描述

url

必需。规定将请求发送的哪个 URL。

data

可选。规定连同请求发送到服务器的数据。

success(data,status,xhr)

可选。规定当请求成功时运行的函数。

额外的参数：

response - 包含来自请求的结果数据
status - 包含请求的状态
xhr - 包含 XMLHttpRequest 对象

$.getJSON("test.js", function(json){
  alert("JSON Data: " + json.users[3].name);
});

AspNetSunny

关注

1
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录