js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）

一、总结

ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可

var lii=document.createElement('li'); //3、dom动态创建元素document.createElement 

div1.appendChild(lii) //4、dom动态给元素添加孩子

var obj=JSON.parse(str) //2、解析json：将json从字符串转化为数组或对象

二、js进阶ajax读取json数据

json中数据：

 [

   {

     "name":"张三",

     "id":123456,

     "sex":"男",

     "VIP":"lv1"

   },

   {

     "name":"李四",

     "id":123457,

     "sex":"男",

     "VIP":"lv3"

   },

   {

     "name":"李丽",

     "id":123458,

     "sex":"女",

     "VIP":"lv2"

   }

 ]

html代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>ajax01</title>

   <style type="text/css">

    div{

         background: rgba(30,100,30,0.3);

         width: 500px;

         height: 500px;

         letter-spacing: 5px;

         padding: 5px

       }

   </style>

   <script type="text/javascript" src="ajax1.js"></script>

 </head>

 <body>

   <input type="button" id="btn" value="测试按钮">

   <div id="div1"></div>

   <script>

   var btn=document.getElementById('btn');

   var div1=document.getElementById('div1');

   btn.onclick=function (){

     ajax('data.json',function(str){ //1、ajax读取json和读取普通文本，和读取链接都是一样的，在url处放上json文件的地址即可

         var obj=JSON.parse(str) //2、解析json：将json从字符串转化为数组或对象

         //alert(typeof obj)

         for(var i in obj){

             for(var j in obj[i]){

             // div1.innerHTML+=j+':'+obj[i][j]+'<br>';

             var lii=document.createElement('li'); //3、dom动态创建元素document.createElement

             lii.innerHTML=j+':'+obj[i][j];

             div1.appendChild(lii) //4、dom动态给元素添加孩子

             }

         }

     },function(s){

       alert(s)

     })

   }

   </script>

 </body>

 </html>

js进阶ajax读取json数据（ajax读取json和读取普通文本，和获取服务器返回数据（链接）都是一样的，在url处放上json文件的地址即可）的更多相关文章

  1. .net通过url访问服务器获取服务器返回数据

    一.url为http协议 1.普通调用: public string GetInfo(string url) { //访问http方法 string strBuff = ""; U ...

  2. 02 - Unit01：服务器返回数据的json处理+搭建项目环境

    服务器返回数据的json处理+搭建项目环境 服务器返回数据的json处理 springMVC JSP响应流程 请求 -->DispatcherServlet -->HandlerMappi ...

  3. Postman----模拟服务器返回数据

    使用场景:在某些情况下,比如A接口还没开发好,我们需要测试B接口,刚好B接口的请求数据中需要包含A接口返回的数据,这时我们就可以模拟A接口服务器返回的数据来测试B接口 解决办法: 举例:模拟此 htt ...

  4. datatables 服务器返回数据后的处理-表格数据属性的操作方法(ajax.dataSrc)

    http://dt.thxopen.com/reference/option/ajax.dataSrc.html http://datatables.net/reference/option/ajax ...

  5. 用ajax的同步请求解决登陆注册需要根据服务器返回数据判断是否能提交的问题

    最近在写www.doubilaile.com的登陆注册.需要用ajax请求服务器判断用户名是否存在,用户名和密码是否匹配,进而提交数据.碰到的问题是异步请求都能成功返回数据,但是该数据不能作为紧接着的 ...

  6. ICE学习第四步-----客户端请求服务器返回数据

    这次我们来做一个例子,流程很简单:客户端向服务器发送一条指令,服务端接收到这条指令之后,向客户端发送数据库中查询到的数据,最终显示在DataGridView上. 根据上一篇文章介绍的Slice语法,我 ...

  7. Vue动态添加v-model绑定及获取其返回数据

    从数据库拿到的动态数据绑定到页面对应的v-model或者v-bind上,并且根据对页的操作获取到返回的值: 1.首先在data里定义一个数据 timeTip 为一个空数组 data () { retu ...

  8. jQuery的ajax请求express服务器返回数据

    html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. AJAX服务器返回数据 连接数据库查询数据

    getcustomer.asp" 中的源代码负责对数据库进行查询,然后用 HTML 表格返回结果: <% response.expires=-1 sql="SELECT * ...

随机推荐

  1. IDLE的自动补全功能

    IDLE的自动补全功能位于:Edit→Show Completions,但每次需要补全的时候都需要点击一次,虽然IDLE提供了一个快捷键(Ctrl + Space),但实测无效.具体操作如下图

  2. 【2017 Multi-University Training Contest - Team 2】 Is Derek lying?

    [Link]: [Description] 两个人都做了完全一样的n道选择题,每道题都只有'A','B','C' 三个选项,,每道题答对的话得1分,答错不得分也不扣分,告诉你两个人全部n道题各自选的是 ...

  3. 洛谷 P2021 faebdc玩扑克

    P2021 faebdc玩扑克 题目背景 faebdc和zky在玩一个小游戏 题目描述 zky有n个扑克牌,编号从1到n,zky把它排成一个序列,每次把最上方的扑克牌放在牌堆底,然后把下一张扑克牌拿出 ...

  4. 跟着鬼哥学so改动，三，作业篇

    作业: 通过前面两篇文章的学习.请自行分析此应用,将当前用户类型改动为Gold Vip 用户. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3VpZ3V ...

  5. funuiTitle-居中问题修改

    今天遇到了一个问题,在一个actionbar上,title居中了,现在想要的方式是,让actionbar上显示返回按钮,后面紧跟着title.当时自己一直尝试要找到activity,然后在theme中 ...

  6. 35.Node.js GET/POST请求

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html 在很多场景中,我们的服务器都需要跟用户的浏览器打交道,如表单提交. 表单提交到服务器 ...

  7. CISP/CISA 每日一题 13

    监控信息系统人员所提供服务的效率和效果的工具: 1.例外报告:识别所有没有成功完成的或出了故障的应用 2.作业重运行报告:大多数异常终止作业都会导致重起 3.操作员问题报告:记录计算机运行问题及解决方 ...

  8. 【Educational Codeforces Round 35 B】Two Cakes

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 从小到大枚举x. 看看a/x+b/x是不是大于等于n 是的话. 看看是不是两种蛋糕都能凑一堆. 也即x的最大枚举量是min(a,b) ...

  9. web.xml的配置及加载顺序

    一web.xml加载过程(步骤): 1.启动WEB项目的时候,容器(如:Tomcat)会去读它的配置文件web.xml.读两个节点: <listener></listener> ...

  10. MySQL各个版本的区别

     文章出自:http://blog.sina.com.cn/s/blog_62b37bfe0101he5t.html 感谢作者的分享 MySQL 的官网下载地址:http://www.mysql. ...