【可以先看后边再看此文】

get获取json

前端代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

        <title></title>

    </head>

    <body>

        <div >

            小丁的年龄是：<span id="dsh"></span>

        </div>

        <script type="text/javascript">

            $.ajax({

               type: "get",

               url:  "DB.json",

               datatype: "json",//"xml", "html", "script", "html", "jsonp", "text".

               success: function (data,status) {

                   document.getElementById("dsh").innerHTML=data.teacher[1].age;

                   //var js=JSON.stringify(data);//转换成json字符串

               },

               error:   function (data,status) { alert("Ajax请求Json错误");}

             });

        </script>

    </body>

</html>

DB.json

{ "student": [

{ "name": "王老师",  "age": "40" },

{ "name": "丁老师",  "age": "30" }

],

"teacher": [

{ "name": "小王",  "age": "20" },

{ "name": "小丁",  "age": "10" }

] }

效果

html批量读取json

html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

        <title></title>

    </head>

    <body>

        <script type="text/javascript">

            $.ajax({

               type: "get",

               url:  "DB.json",

               datatype: "json",//"xml", "html", "script", "html", "jsonp", "text".

               success: function (data,status) {

                      document.writeln("学生：<br/>")

                       for (var x in data.student) {

                           document.writeln(data.student[x].name+data.student[x].age+"<br/>")

                       }

                       document.writeln("<p/>老师：<br/>")

                       for (var x in data.teacher) {

                           document.writeln(data.teacher[x].name+data.teacher[x].age+"<br/>")

                       }

               },

               error:   function (data,status) { alert("Ajax请求Json错误");}

             });

        </script>

    </body>

</html>

json

{ "student": [

{ "name": "小王",  "age": "10" },

{ "name": "小丁",  "age": "20" }

],

"teacher": [

{ "name": "王老师",  "age": "30" },

{ "name": "丁老师",  "age": "40" }

] }

效果

项目实战

html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>

        <style type="text/css">

            table{border-collapse: collapse; width: 100%;}

            table tr td{border: red solid 1px;  width: 50%; text-align: center;}

        </style>

    </head>

    <body>

        <table>

        </table>

        <script type="text/javascript">

            $.ajax({

                type: "get",

                  url:  "DB.json",

                  datatype: "json",

                   success: function (data) {

                       for (var i=0; i<data.length; i++) {

                           $("table").append(

                               "<tr><td>"+data[i].name+"</td><td>"+data[i].age+"</td></tr>"

                           )

                       }

                   },

                   error:function () { alert("Ajax请求Json错误");}

               });

        </script>

    </body>

</html>

json

[

{"name": "小王",  "age": "10" },

{ "name": "小丁",  "age": "20" },

{ "name": "小红",  "age": "18" }

]

效果

0-ajax操作json(番外篇)的更多相关文章

  1. lambda表达式操作DataTable番外篇

    using System;using System.Collections.Generic;using System.Data;using System.Linq;using System.Text; ...

  2. 《手把手教你》系列技巧篇（三十一）-java+ selenium自动化测试- Actions的相关操作-番外篇（详解教程）

    1.简介 上一篇中,宏哥说的宏哥在最后提到网站的反爬虫机制,那么宏哥在自己本地做一个网页,没有那个反爬虫的机制,谷歌浏览器是不是就可以验证成功了,宏哥就想验证一下自己想法,于是写了这一篇文章,另外也是 ...

  3. 《手把手教你》系列技巧篇（三十六）-java+ selenium自动化测试-单选和多选按钮操作-番外篇（详解教程）

    1.简介 前边几篇文章是宏哥自己在本地弄了一个单选和多选的demo,然后又找了网上相关联的例子给小伙伴或童鞋们演示了一下如何自动化测试,这一篇宏哥在网上找了一个问卷调查,给小伙伴或童鞋们来演示一下.上 ...

  4. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  5. 智能家居实践（番外篇）—— 接入 HomeKit 实现用 Siri 控制家电

    转载:智能家居实践(番外篇)—— 接入 HomeKit 实现用 Siri 控制家电 前面我写了一个系列共三篇的智能家居实践,用的是 Amazon Echo 实现语音控制,但是 Amazon Echo ...

  6. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  7. 渗透测试思路 - CTF(番外篇)

    渗透测试思路 ​ Another:影子 (主要记录一下平时渗透的一些小流程和一些小经验) CTF(番外篇) ​ 笔者是一个WEB狗,更多的是做一些WEB类型题目,只能怪笔者太菜,哭~~ 前言 ​ 本篇 ...

  8. suse 12 二进制部署 Kubernetets 1.19.7 - 番外篇 - 增加node节点

    文章目录 0.前景提要 1.准备node节点环境 1.0.修改配置脚本参数 1.1.配置免密 1.2.添加hosts解析 1.3.修改主机名 1.4.更新PATH变量 1.5.安装依赖包 1.6.关闭 ...

  9. 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV

    这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度 ...

随机推荐

  1. [ext/iconv/iconv.lo] Error 1

    办法1: wget http://ftp.gnu.org/pub/gnu/libiconv/libiconv-1.13.1.tar.gz tar -zxvf libiconv-1.13.1.tar.g ...

  2. 在SQL Server 2008中调用.net,dll

    原文:在SQL Server 2008中调用.net,dll T-SQL的在执行普通的查询的时候是很高效的,但是在执行循环,判断这样的语句的时候效率就不那么的高了.这时可以借助CLR了,我们可以在SQ ...

  3. C#快速随机按行读取大型文本文件

    原文:C#快速随机按行读取大型文本文件 下面是我实现的一个数据文件随机读取类,可以随机读取大型文本文件的某一行.在我机器上对一个130MB的文本文件,读取第200000的速度从传统做法的400ms提高 ...

  4. Windows下MYSQL自动备份批处理

    windows下MYSQL自动备份批处理 2011-05-04 09:16:45|  分类: mysql|举报|字号 订阅     按系统时间进行备份 注意mysql安装路径中如果有空格.就要把,.b ...

  5. Android之LinkedHashMap实现LRU

    先看下LinkedHashMap的数据结构图 对于LinkedHashMap而言,它继承与HashMap.底层使用哈希表与双向链表来保存所有元素.其基本操作与父类HashMap相似,它通过重写父类相关 ...

  6. 简单的三层asp.net webForm使用Ninject实现Ioc

    简单的三层asp.net webForm使用Ninject实现Ioc 在asp.net webform下使用Ninject的简单过程. 首先建立个项目,如下图,简单三层(PS:UI层要同时引用BLL. ...

  7. 浅谈DevExpress<二>：设计一个完整界面（1）

    昨天谈了界面的换肤问题,今天拿一个简单的界面来介绍一下怎么设计一个五脏俱全的界面,总体效果如下图(种类的图片随便找的^^):

  8. ASP添加进度条

    今日在学习JavaScript所有写个通用的进度条,防止网页假死.让用户更清楚地知道此网页正在进行加载或者处理一些事情,所有加载进度条是一个网站的必要性. 在网页中Page_load首先要加载此进度条 ...

  9. 监控系统Opserver

    监控系统Opserver的配置调试   Stack Exchange开源其监控系统Opserver有一段时间了.之前在项目中用过他们的MiniProfile来分析页面执行效率和帮助新人了解项目,当他们 ...

  10. Eclipse添加Web和java EE插件

    1.在Eclipse中菜单help选项中选择install new software选项 2.在work with 栏中输入 Juno - http://download.eclipse.org/re ...