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

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. nginx+lua+redis高并发应用建设

    ngx_lua将lua嵌nginx,让nginx运行lua脚本.高并发,非堵塞过程中的各种请求. url要求nginxserver,然后lua查询redis,返回json数据. 一.安装lua-ngi ...

  2. 基于EF+WCF的通用三层架构及解析

    分享基于EF+WCF的通用三层架构及解析 本项目结合EF 4.3及WCF实现了经典三层架构,各层面向接口,WCF实现SOA,Repository封装调用,在此基础上实现了WCFContext,动态服务 ...

  3. Node填坑教程——过滤器

    所谓“过滤器”,只是一个概念,可以理解是一个路由,也可以理解为一个中间件.原理非常简单,就是利用匹配规则,让其有限匹配在正常的路由前面处理就行了. 比如有如下路由 app.get('/', funct ...

  4. jQuery Tags Input 插件显示选择记录

    利用jQuery Tags Input 插件显示选择记录 最近花了不少时间在重构和进一步提炼我的Web开发框架上,力求在用户体验和界面设计方面,和Winform开发框架保持一致,而在Web上,我主要采 ...

  5. Stub和Mock的理解

    我对Stub和Mock的理解 介绍 使用测试驱动开发大半年了,我还是对Stub和Mock的认识比较模糊,没有进行系统整理. 今天查阅了相关资料,觉得写得很不错,所以我试图在博文中对资料进行整理一下,再 ...

  6. Head first设计模式

    使用NeatUpload控件实现ASP.NET大文件上传 一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不 ...

  7. jQuery插件综合应用1

    jQuery插件综合应用(一)注册   一.介绍 注册和登录是每个稍微有点规模的网站就应该有的功能.登陆功能与注册功能类似,也比注册功能要简单些.所以本文就以注册来说明jQuery插件的应用. jQu ...

  8. GEF-whole-upload教程中遇到的问题及解决方案

    最近在学习GEF开发,使用的是GEF-whole-upload这个教程.由于教程当时所使用的版本与本人使用的版本有一些差异,中间出现了不少问题,现在将解决方案分享给大家. 本人使用的Eclipse版本 ...

  9. WCF双工学习笔记

    WCF双工的作用在于服务端执行某个方法的时候调用客户端的方法,有点类似委托的感觉,实际项目中在什么情况下使用还没想到. WCF双工支持两种bind,一是nettcp.另一个是wsDualHttp,这里 ...

  10. easyui tree 的数据格式转换

    一般用来储存树数据的数据库表都含有两个整型字段:id pid,所以我们查询出来的List一般是这样的(约定pId为-1的节点为根节点): var serverList = [ {id : 2,pid ...