摘自

Ajax获取 Json文件提取数据

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

  1. [
  2.   {
  3.     "name":"张国立",
  4.     "sex":"男",
  5.     "email":"zhangguoli@123.com",
  6.     "url":"./img/1.jpg"
  7.   },
  8.   {
  9.     "name":"张铁林",
  10.     "sex":"男",
  11.     "email":"zhangtieli@123.com",
  12.     "url":"./img/2.jpg"
  13.   },
  14.   {
  15.     "name":"邓婕",
  16.     "sex":"女",
  17.     "email":"zhenjie@123.com",
  18.     "url":"./img/3.jpg"
  19.   },
  20.   {
  21.     "name":"张国立",
  22.     "sex":"男",
  23.     "email":"zhangguoli@123.com",
  24.     "url":"./img/4.jpg"
  25.   },
  26.   {
  27.     "name":"张铁林",
  28.     "sex":"男",
  29.     "email":"zhangtieli@123.com",
  30.     "url":"./img/5.jpg"
  31.   },
  32.   {
  33.     "name":"邓婕",
  34.     "sex":"女",
  35.     "email":"zhenjie@123.com",
  36.     "url":"./img/6.jpg"
  37.   }
  38. ]

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Insert title here</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  7.     <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  8.     <style type="text/css">
  9.  
  10.         .p1{
  11.             font-size: 14px;
  12.             color: #000;
  13.         }
  14.         .p2{
  15.             font-size: 12px;
  16.             color: #b0b0b0;
  17.         }
  18.         .p3{
  19.             font-size: 14px;
  20.             color: #ff5f19;
  21.         }
  22.         .product{
  23.             width:100%;
  24.             position: relative;
  25.             margin: 20px 0 5px 0;
  26.             height: 100px;
  27.             background: #fafafa;
  28.         }
  29.  
  30.         .img{
  31.             width: 100px;
  32.             height: 100px;
  33.             float: left;
  34.             margin-right: 20px;
  35.         }
  36.         .p{
  37.             display:inline-block;
  38.             float:left;
  39.             width:50%;
  40.             margin-top:6px;
  41.             font-family: Microsoft YaHei;
  42.         }
  43.         .p1{
  44.             margin-top:16px;
  45.         }
  46.  
  47.     </style>
  48.     <script>
  49.         //页面加载   获取全部信息
  50.         $(function(){
  51.             $.ajax({
  52.                 type: "POST",//请求方式
  53.                 url: "item.json",//地址，就是json文件的请求路径
  54.                 dataType: "json",//数据类型可以为 text xml json  script  jsonp
  55. 　　　　　　　　　 success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
  56.                     addBox(result);
  57.                 }
  58.             });
  59.             /*$.get("item.json",function(result){
  60.                 //result数据添加到box容器中;
  61.                 addBox(result);
  62.             });*/
  63.         });
  64.         function addBox(result){
  65.             //result是一个集合,所以需要先遍历
  66.             $.each(result,function(index,obj){
  67.                 $("#box").append("<div class='product'>"+//获得图片地址
  68.                     "<div><img class='img' src="+obj['url']+"/></div>"+
  69.                     //获得名字
  70.                     "<div class='p1 p'>"+obj['name']+"</div>"+
  71.                     //获得性别
  72.                     "<div class='p2 p'>"+obj['sex']+"</div>"+
  73.                     //获得邮箱地址
  74.                     "<div class='p3 p'>"+obj['email']+"</div>"+
  75.                     "</div>");
  76.             });
  77.         }
  78.     </script>
  79. </head>
  80. <body>
  81. <!-- 构建装一个容器 -->
  82. <div id="box">
  83. </div>
  84. </body>
  85. </html>

　　3.运行效果

4.文件结构

Ajax获取 Json文件提取数据的更多相关文章

  1. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

  2. 【c++基础】从json文件提取数据

    前言 标注数据导出文件是json格式的,也就是python的dict格式,需要读取标注结果,可以使用c++或者python,本文使用c++实现的. JsonCpp简介 JsonCpp是一种轻量级的数据 ...

  3. jquery ajax 获取 json 文件数据

    [ {"name":"project1"}, {"name":"project2"}, {"name" ...

  4. AJAX获取JSON形式的数据

    test.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. AngularJS学习笔记（3）——通过Ajax获取JSON数据

    通过Ajax获取JSON数据 以我之前写的与用户交互的动态清单列表为例,使用JSON前todo.html代码如下: <!DOCTYPE html> <html ng-app=&quo ...

  6. jQuery中使用Ajax获取JSON格式数据示例代码

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...

  7. ajax获取json数据 for select2

    json数据“a.json” [ { "id": "1", "text": "张三" }, { "id&quo ...

  8. qt qml ajax 获取 json 天气数据示例

    依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...

  9. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

随机推荐

  1. CSS元素（文本、图片）水平垂直居中方法

    1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:center; 4.position:relati ...

  2. 一款超级炫酷的编辑代码的插件 Power Mode

    今天偶尔发现了一款比较炫酷的插件,想让你们看看效果 打代码的时候会有非常炫酷的效果哟 因为我用的编辑器是VScode,所以我也只搞了搞VSCode中使用Power Mode的方法,如果你用的是别的编辑 ...

  3. 【读书笔记】iOS-优化内存

    imageNamed:方法创建UIImage对象,这些对象不再使用的时候 会放到应用的默认自动回收池中,而不是当前的事件循环的自动回收池中,这样的对象占用的内存只有在应用结束的时候 才会回收.如果用这 ...

  4. JavaScript非数字（中文）排序

    直接上代码: var arr=[ {name:"张散步",age:"23",sports:"篮球",number:"231123& ...

  5. 【Python】keras使用LSTM拟合曲线

    keras生成的网络结构如下图: 代码如下: from sklearn.preprocessing import MinMaxScaler from keras.models import Seque ...

  6. Nginx下配置网站SSL实现https访问本站就是用的这方法

    本文出至:新太潮流网络博客 第一步:服务器环境,lnmp即Linux+Nginx+PHP+MySQL,本文中以我的博客为例,使用的是阿里云最低档的ECS+免费的Linux服务器管理系统WDCP快速搭建 ...

  7. Asp.Net配置不允许通过url方式访问目录下的资源

    Asp.Net网站发布后,有部分文件为了安全性,是不能直接通过url访问获取 通常有2种做法: 1.将文件目录建立在 App_code 或者App_Data 等默认的隐藏目录下 2.将文件的目录添加到 ...

  8. C#语言————拼接、插入、替换、删除四种方法

    StringBuilder sb = new StringBuilder("hello"); sb.Append("world");//拼接 sb.Insert ...

  9. SQL SERVER2008判断文件夹是否存在并创建文件夹

    原文地址:https://www.cnblogs.com/iiwen/p/7650118.html DECLARE @PATH VARCHAR(255) --路径 DECLARE @DATE VARC ...

  10. 静态库lib调试

    1.首先生成lib文件的解决方案编译通过. 2.将最新的lib和头文件在需要调用的exe中,替换掉. 3.复制需要调试的cpp文件到exe解决方案下,并添加现有项. 4.运行无错误后,添加断点即可调试 ...