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

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. sqlclr创建表值函数案例

    ----------------------------------------------:定义表值类型:(1.一定返回的是IEnumerable2.一定带参数3.一定有FillRowMethodN ...

  2. NET实现仓库看板的一些感想

    NET实现仓库看板的一些感想 从一名技术开发人员到实施人员的蜕变,从不同的角度看待同一个问题,或许会有不一样的结果.这里记录一下最近一个项目实施的案例,非常有感触! 一. 项目情况简介 本次项目是给一 ...

  3. JAVA学习：多态

    多态:可以理解为事物存在的多种体现形态.   人:男人,女人 动物:猫,狗. 猫 x = new 猫(); 动物 x = new 猫()   1,多态的体现 父类的引用指向了自己的子类对象. 父类的引 ...

  4. JS逗号、冒号与括号

    JavaScript面试时候的坑洼沟洄——逗号.冒号与括号   看完了javaScript数据类型和表达式与运算符相关知识后以为可以对JavaScript笔试题牛刀小试一把了,没想到有一次次的死在逗号 ...

  5. Step one : 熟悉HTML

    //H1 1 <html> <head> <title>BeiJing</title> </head> <body> <h ...

  6. Web API中使用Dependency Resolver

    Web API中使用Dependency Resolver 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http://www.cnblogs.com/aehyo ...

  7. webx学习1

    webx的配置 如果想在web项目中使用webx框架,需要在web-inf/web.xml文件中进行相关的配置. 1.初始化spring容器 初始化spring容器- /web-inf/web.xml ...

  8. [转]Top 10 DTrace scripts for Mac OS X

    org link: http://dtrace.org/blogs/brendan/2011/10/10/top-10-dtrace-scripts-for-mac-os-x/ Top 10 DTra ...

  9. 重载 C 函数

    在 clang 的扩展下,可以重载 C 函数,例如重载 sin 函数: float __attribute__((overloadable)) sin(float x) { return sinf(x ...

  10. IOS 跳转到系统的url

    About — prefs:root=General&path=AboutAccessibility — prefs:root=General&path=ACCESSIBILITYAi ...