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

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. centos6.4搭建apache+mysql+php环境

    最近用php做的项目到了项目部署的时候,服务器为centos6.4系统,为了快捷部署,采用yum安装部署 大部分内容参考博客  http://blog.sina.com.cn/s/blog_c02ed ...

  2. Android开发方法学

    这是Cyril Mottier最近更新的一篇文章,原谅地址在这里:Android开发方法学. 这篇文章是他介绍自己所在项目小组(Capitaine Train Android Team)设计.开发时的 ...

  3. C++ const关键字用法详解

    1const char*, char const*, char*const的区别问题几乎是C++面试中每次都会有的题目. 事实上这个概念谁都有只是三种声明方式非常相似很容易记混. Bjarne在他的T ...

  4. 增删查改-MySQL

    查询: 在MySQL中,select的基本语法形式: select 属性列表 from 表名和视图 [where 条件表达式] [group by 属性名 [having 条件表达式]] [order ...

  5. 监听JVM关闭

    使用Runtime的addShutdownHook(thread)方法: for(int i=0; i<5; i++){ System.out.println(i); } Thread th = ...

  6. 【IOS开发】UItextfield输入电话号码，自动调整格式

    UItextfield中实现输入电话号码,自动按位置在加“—”效果.效果图如下. 核心代码: -(BOOL)textField:(UITextField *)textField shouldChang ...

  7. IController控制器的创建过程

    .NET/ASP.NET MVC Controller 控制器(二:IController控制器的创建过程)   阅读目录: 1.开篇介绍 2.ASP.NETMVC IControllerFactor ...

  8. linux下telnet mysql的3306断口,提示Can't connect to MySQL server on localhost (110)

    新购买的阿里云ECS服务器,食用lnmp环境,安装完毕后,telnet localhost 3306提示Can't connect to MySQL server on localhost (110) ...

  9. WordPress搭建Personal Blog【转】

    早就想搭建一个专属于自己的博客了,用来记录自己生活.学习的点点滴滴.之所以选WordPress,主要是因为它可以支持Latex,而且特别喜欢其简约的风格. WordPress有个the famous ...

  10. [转]Resolving kernel symbols

    原:http://ho.ax/posts/2012/02/resolving-kernel-symbols/ KXLD doesn't like us much. He has KPIs to mee ...