jquery简单ajax示例_读取json文件数据

最新推荐文章于 2023-04-15 09:34:36 发布

aishi0821

最新推荐文章于 2023-04-15 09:34:36 发布

阅读量123

点赞数

文章标签： json xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/phpway/p/3485487.html

版权

来自于《jquery权威指南》

--------------------------------------

点击button后，获取到json文件数据，显示如下：

Json文件：

[
{
    "name":"王美丽",
    "sex": "女",
    "age":29
},
{
    "name":"梁帅哥",
    "sex": "男",
    "age":30
}
]

index.html代码：

<!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>jQuery</title>
<style type="text/css">
body,div,ul,li,p{margin: 0;padding: 0; font-size: 13px;}
ul{list-style-type: none;}
.load{width: 230px;border: solid 1px #666;padding: 10px;background-color: orange;}

</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

$(function(){
    $("#btn").click(function(){
        var strHtml = "";
        $.getJSON("a.json",function(data){
            //alert("aaa");
            $(".load").empty();            
            $.each(data, function(InfoIndex, Info){
                strHtml += "姓名：" + Info['name'] + "<br />";
                strHtml += "性别：" + Info['sex'] + "<br />";
                strHtml += "年龄：" + Info['age'] + "<hr>";
            });
            $(".load").html(strHtml);//出了回调函数，strhtml似乎就为空？
        });

    });
});

</script>
</head>
<body>
<div class="load"></div>
<p><input type="button" id="btn" value="获取数据" /></p>
</body>
</html>

注意内容：

（1）$.getJSON 大小写问题；

（2）json数据格式书写正确。

转载于:https://www.cnblogs.com/phpway/p/3485487.html

aishi0821

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery简单ajax示例_读取json文件数据

来自于《jquery权威指南》--------------------------------------点击button后，获取到json文件数据，显示如下：Json文件：[{ "name":"王美丽", "sex": "女", "age":29},{ "name":"梁帅哥", "sex": "男"...
复制链接

扫一扫