获取JSON数据的方法

json数据的获取有很多方法,主要细说一下ajax获取的方法。

  1. json文件内容(item.json)
    [
    {
    “name”:“张国立”,
    “sex”:“男”,
    “email”:"[email protected]",
    “url”:"./img/1.jpg"
    },
    {
    “name”:“张铁林”,
    “sex”:“男”,
    “email”:"[email protected]",
    “url”:"./img/2.jpg"
    },
    {
    “name”:“邓婕”,
    “sex”:“女”,
    “email”:"[email protected]",
    “url”:"./img/3.jpg"
    },
    {
    “name”:“张国立”,
    “sex”:“男”,
    “email”:"[email protected]",
    “url”:"./img/4.jpg"
    },
    {
    “name”:“张铁林”,
    “sex”:“男”,
    “email”:"[email protected]",
    “url”:"./img/5.jpg"
    },
    {
    “name”:“邓婕”,
    “sex”:“女”,
    “email”:"[email protected]",
    “url”:"./img/6.jpg"
    }
    ]

2 发送Ajax请求,获取Json数据

复制代码

Insert title here

success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
addBox(result);
}
});
/$.get(“item.json”,function(result){
//result数据添加到box容器中;
addBox(result);
});
/
});
function addBox(result){
//result是一个集合,所以需要先遍历
$.each(result,function(index,obj){
$("#box").append("

"+//获得图片地址
”+
//获得名字
”+obj[‘name’]+"
"+
//获得性别
”+obj[‘sex’]+"
"+
//获得邮箱地址
”+obj[‘email’]+"
"+
”);
});
}

  1. 运行效果:
    在这里插入图片描述

  2. 文件结构
    在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_42921043/article/details/83062236
今日推荐