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

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. mysql基础之对库表操作

    原文:mysql基础之对库表操作 查看一下所有的库,怎么办? Mysql>Show databases; 选库语句: Use 库名 创建一个数据库: create database 数据库名 [ ...

  2. ASP.NET MVC中Area的另一种用法

    ASP.NET MVC中Area的另一种用法 [摘要]本文只是为一行代码而分享 context.MapRoute("API", "api/{controller}/{ac ...

  3. JAVA实例化class的三种方式

    不多说  直接上例子 package org.lxh.demo15.getclassdemo ; class X{ }; public class GetClassDemo02{ public sta ...

  4. 一个ERP系统的磕磕碰碰

    历时5个月的开发,终于可以交付使用了.在这期间系统从需求分析.系统架构设计.开发.测试.运行.迭代.交付,整个忐忑波荡的一路走来,终于有时间静下心来写一篇总结跟各位博友一起探讨.学习了.如果对大家有帮 ...

  5. 今天用C#做的一个小的注册练习

    下边是实现的代码: using System;using System.Collections.Generic;using System.ComponentModel;using System.Dat ...

  6. 第一章 CLR 的执行模型

    CLR via C# 读书笔记:第一章 CLR 的执行模型(1) 第Ⅰ部分CLR基础.这部分为三章(第一章:CLR的只想能够模型,第二章:生成.打包.部署和管理应用程序及类型,第三章:共享程序集和强命 ...

  7. IOS学习之路十六（UItableView 通过Prepare for segue 页面传值）

    当你点击一个UITableView 的section 或者cell的时候希望把值传到另一个页面(页面是通过segue跳转的),可以通过prepareforsegure 方法传值 (我的UITableV ...

  8. SOCKET网络编程细节问题（4）

    SOCKET网络编程快速上手(二)——细节问题(4) 5.慢系统调用及EINTR 还记得前面readn和writen函数么?里面有个EINTR,现在就来谈谈这个,这个很重要. Linux世界有个叫信号 ...

  9. A2D规则引擎

    A2D规则引擎 写了个简单的规则引擎,普通情况够用了: 比如2家公司有各自的利率计算规则,如下: 在C#方面,没有写在C#的业务逻辑代码中,而是移到了外部规则文件中,如(ACompanyRatePol ...

  10. C#操作Kentico cms 中的 content（winform环境）

    前段时间做了个winform程序,去管理kentico网站的content,包括content节点的增删改查,以及相应节点内容的修改.现在将对content的操作方法简单的介绍一下. 我们想要操作ke ...