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. 18/9/22NOIP模拟考

    18/9/22NOIP模拟考 其实本来是有多组数据的,出题人忘记在题面上加了   斜眼笑 期望得分:100:实际得分:100 由于种种原因,拿到题的时候已经过去了0.5h+... 然后因为这道题数据范 ...

  2. Spring Cloud Sleuth通过Kafka将链路追踪日志输出到ELK

    1.工程简介 elk-eureka-server作为其他三个项目的服务注册中心 elk-kafka-client调用elk-kafka-server,elk-kafka-server再调用elk-ka ...

  3. Spring有用功能--Profile、WebService、缓存、消息、ORM

    本篇介绍一些Spring与其它框架结合的有用功能,包含:Apache CXF WebService框架.Redis缓存.RabbitMQ消息.MyBatis框架. 另外对于Profile,也是Spri ...

  4. Hadoop作业性能指标及參数调优实例 （二）Hadoop作业性能调优7个建议

    作者:Shu, Alison Hadoop作业性能调优的两种场景: 一.用户观察到作业性能差,主动寻求帮助. (一)eBayEagle作业性能分析器 1. Hadoop作业性能异常指标 2. Hado ...

  5. 2.2 Consumer API官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ 2.2 Consumer API 2.2.消费者API 随着0..0版本,我们已经增 ...

  6. 趣闻｜Python之禅（The Zen of Python）

    在Python解释器中输入“import this”会发生什么?如果你不知道这个彩蛋,推荐继续阅读这篇文章. 2001年秋,Foretec(一家会议组织公司)正在准备召开第十届Internationa ...

  7. mysql-5.7.19-winx64服务无法启动解决方案

    解压mysql压缩包时没有data文件夹,不要手动创建,在cmd下直接运行命令: mysqld –initialize-insecure,data文件夹会自动生成,注意单词千万不要拼错,不要写成–in ...

  8. snmp agent 表格实现（子代理方式实现）

    前奏參见例如以下: http://blog.sina.com.cn/s/blog_8f3de3250100xhao.html http://blog.csdn.net/hepeng597/articl ...

  9. 简单记录几个有用的sql查询

    转载自:http://blog.itpub.net/16436858/viewspace-676265/ 下面示例中,查询的数据表参考这一篇的Person表. 一.限制返回的行数 1.Sql Serv ...

  10. C Tricks（十八）—— 整数绝对值的实现

    为正还是为负:(对 int 类型而言,第一位为符号位,其余为数值,则右移 31 位,再与 1 求与) 如果为正 ⇒ 返回原值 如果为负 ⇒ 对其二进制形式各位取反 + 1 int abs(int x) ...