Ajax获取 Json文件提取数据
2018-01-30 13:56
232 查看
Ajax获取 Json文件提取数据
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 文件结构
相关文章推荐
- ajax--将获取到的文件内的数据转化成json格式并使用---输入提示
- 通过Jquery中Ajax获取json文件数据
- 类型:JQuery;问题:ajax调用ashx文件;结果:ashx文件怎么获取$.ajax()方法发送的json数据
- struts2 + ajax(由前台的form提交数据到后台,再根据form所调用返回获取的后台json格式的数据返回到前端,然后前端用jquery对json数据进行解析)==》》涉及文件上传的部分
- JavaWeb将数据包装成JSON以及JSP通过ajax对JSON的获取与解析(代码实例)
- AJAX 跨域请求 - JSONP获取JSON数据
- JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
- Jquery 使用Ajax获取后台返回的Json数据后,页面处理
- Python 获取接口数据,解析JSON,写入文件
- ajax 获取 json 数据乱码
- jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
- 豆瓣API使用介绍及通过ajax跨域获取url的json数据的方法
- Android中数据文件解析(Json解析【从服务器端获取数据并且解析,显示在客户端上面】)
- jQuery $.ajax跨域-JSONP获取JSON数据(转载)
- AJAX 跨域请求 - JSONP获取JSON数据
- IE9.0或者360下js(JavaScript、jQuery)不能正确执行(加载),按F12后执行正常;Firefox下ajax的success返回数据data(json、string)无法获取
- 使用ajax获取JSON数据的jQuery代码的格式
- AJAX 跨域请求 - JSONP获取JSON数据
- 通过jquery封装的ajax获取后台json数据
- AJAX 跨域请求 - JSONP获取JSON数据(PHP版)