摘自

Ajax获取 Json文件提取数据

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"

  }

]

　　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>

　　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. 【读书笔记】iOS-iOS开发之iOS程序偏好设置(Settings Bundle)的使用

    在Android手机上, 在某个程序里,通过按Menu键,一般都会打开这个程序的设置,而在iOS里,系统提供了一个很好的保存程序设置的机制.就是使用Settings Bundle. 在按了HOME键的 ...

  2. (后端)excel设置日期格式的步骤

    在excel中设置日期格式,分直接设置和代码设置. 一.直接设置: 选取日期所在的单元格,单元格右键菜单中--设置单元格格式.在单元格格式窗口中选数字类型为“日期”在右边的列表框中选取相应的日期格式即 ...

  3. Python数据清洗基本流程

    # -*- coding: utf-8 -*-"""Created on Wed Jul 4 18:40:55 2018 @author: zhen"" ...

  4. Dota 2 中安装包的作用

    在玩data 2 的时候有很多其他安装包的下载,那这些有啥用呢? Reborn是Dota2的重生客户端,也就是主客户端. Opengl是显卡优化的,应该是微软的一个标准,有助于提高游戏的 FPS. V ...

  5. [HDFS_add_2] SecondaryNameNode 滚动 NameNode 数据流程

    0. 说明 在 将 SecondaryNameNode 配置到 s105 节点上 的基础上进行 SecondaryNameNode 滚动 NameNode 数据流程 分析 1. SecondaryNa ...

  6. [MapReduce_3] MapReduce 程序运行流程解析

    0. 说明 Word Count 程序运行流程解析 &&  MapReduce 程序运行流程解析 1. Word Count 程序运行流程解析 2. MapReduce 程序运行流程图

  7. Python学习—Pycharm连接mysql服务器

    安装pymysql pip3 install pymysql 安装Mysql客户端驱动(基于Pycharm工具) 点击download,下载mysql驱动 等待驱动安装成功后,点击OK即可 创建数据库 ...

  8. 自定义mysql类用于快速执行数据库查询以及将查询结果转为json文件

    由于每次连接数据库进行查询比较麻烦,偶尔还需要将查询结果转为json格式的文件, 因此暂时定义一个mysql的类,将这些常用的方法进行封装,便于直接调用(代码如下,个人用,没写什么注释). 注:导入了 ...

  9. KVM网络桥接模式解说

    在上一篇博客中,我画了一张图来解说桥接模式下kvm的网络是什么样子的.那今天我就仔细来解释一下这方面的内容,让大家学会配置桥接网络. 还是这样的一张图,我们知道bridge就是桥接网卡的名称.让虚拟机 ...

  10. ApplicationContext中Bean的生命周期

    引言 Bean应用上下文中的生命周期和在BeanFactory中生命周期类似,不同的是,如果Bean实现了org.springframework.context.ApplicationContextA ...