jquery Ajax请求本地json

1-1-1 json文件内容(item.json)

[{"name":"张国立","sex":"男","email":"zhangguoli@123.com","url":"./img/1.jpg"},{"name":"张铁林","sex":"男","email":"zhangtieli@123.com","url":"./img/2.jpg"},{"name":"邓婕","sex":"女","email":"zhenjie@123.com","url":"./img/3.jpg"},{"name":"张国立","sex":"男","email":"zhangguoli@123.com","url":"./img/4.jpg"},{"name":"张铁林","sex":"男","email":"zhangtieli@123.com","url":"./img/5.jpg"},{"name":"邓婕","sex":"女","email":"zhenjie@123.com","url":"./img/6.jpg"}
]

1-1-2 发送Ajax请求，获取Json数据

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Insert title here</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><script type="text/javascript" src="js/jquery-1.10.2.min.js"></script><style type="text/css">.p1{font-size: 14px;color: #000;}.p2{font-size: 12px;color: #b0b0b0;}.p3{font-size: 14px;color: #ff5f19;}.product{width:100%;position: relative;margin: 20px 0 5px 0;height: 100px;background: #fafafa;}.img{width: 100px;height: 100px;float: left;margin-right: 20px;}.p{display:inline-block;float:left;width:50%;margin-top:6px;font-family: Microsoft YaHei;}.p1{margin-top:16px;}</style><script>//页面加载   获取全部信息
        $(function(){$.ajax({type: "POST",//请求方式
                url: "item.json",//地址，就是json文件的请求路径
                dataType: "json",//数据类型可以为 text xml json  script  jsonp　　　　　　　　　 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("<div class='product'>"+//获得图片地址"<div><img class='img' src="+obj['url']+"/></div>"+//获得名字"<div class='p1 p'>"+obj['name']+"</div>"+//获得性别"<div class='p2 p'>"+obj['sex']+"</div>"+//获得邮箱地址"<div class='p3 p'>"+obj['email']+"</div>"+"</div>");});}</script>
</head>
<body>
<!-- 构建装一个容器 -->
<div id="box">
</div>
</body>
</html>

1.2.1 运行效果：

1.3.1 文件结构

jquery Ajax请求本地json相关推荐

jquery ajax json文件,jQuery ajax读取本地json文件
jQuery ajax读取本地json文件 json文件 { "first":[ {"name":"张三","sex": ...
jQuery ajax请求两次问题,jquery ajax请求了两次问题
页面有一个请求form: 订单编号用户帐户发货状态请选择未发送已发送查询 JavaScript请求部分: function showdatalist() { var username = ...
ajax datatype为html,Jquery ajax请求中datatype的含义
一切从一个普通的前端ajax请求jspringMVC后端的例子开始, 前端jquery ajax 请求: $.ajax({ url: getAbsoluteUrl('score/findScore') ...
python爬虫今日头条_python爬虫—分析Ajax请求对json文件爬取今日头条街拍美图
python爬虫-分析Ajax请求对json文件爬取今日头条街拍美图前言本次抓取目标是今日头条的街拍美图,爬取完成之后,将每组图片下载到本地并保存到不同文件夹下.下面通过抓取今日头条街拍美图讲解一 ...
ajax反序列化出错,将数据从jquery ajax请求传递给wcf服务失败了反序列化？
我使用下面的代码来调用wcf服务.如果我调用不带参数的(测试)方法,但返回一个字符串,它工作正常.如果我一个参数添加到我的方法,我得到一个奇怪的错误:将数据从jquery ajax请求传递给wcf服务 ...
使用ETag识别ajax,如何使用jQuery AJAX请求访问ETag头？
我正在使用jQuery ajax调用来请求来自发送HTTP响应头中的ETag的服务器的数据.我需要访问标题,但是当请求成功并调用jqXHR.getAllResponseHeaders()时,我只能看到 ...
ajax返回字符串怎么处理,ajax请求返回json字符串/json对象处理
1. 返回json字符串如何处理 $.ajax({ url:xxx, success:function(date){ }, error:function(){ } }); 通过最原始的返回: Prin ...
ajax 怎么input赋值,jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签...
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签发布于 2016-11-25 16:26:40 | 111 次阅读 | 评论: 0 | 来源: ...
ajax调用ashx的方法,jquery.ajax请求aspx和ashx的异同 Jquery Ajax调用aspx页面方法
1.jquery.ajax请求aspx 请求aspx的静态方法要注意一下问题: (1)aspx的后台方法必须静态,而且添加webmethod特性 (2)在ajax方法中contentType必须是&q ...

jquery Ajax请求本地json

jquery Ajax请求本地json相关推荐

最新文章

热门文章