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. python try except 捕捉错误得到错误的时候的值

    try: dict_reason = self.get(name,id_number,mobile,card_number,**kwargs) except RetryError as e: # 获取 ...

  2. ActiveMQ学习总结（3）——spring整合ActiveMQ

    1.参考文献 Spring集成ActiveMQ配置 Spring JMS异步发收消息 ActiveMQ 2.环境 在前面的一篇ActiveMQ入门实例中我们实现了消息的异步传送,这篇博文将如何在spr ...

  3. Java第三方工具库/包汇总

    一.科学计算或矩阵运算库 科学计算包: JMathLib是一个用于计算复杂数学表达式并能够图形化显示计算结果的Java开源类库.它是Matlab.Octave.FreeMat.Scilab的一个克隆, ...

  4. xml格式报文的拼装，和解析成实体类

    我们的微信支付,使用的是第三方的支付,某银行的微信支持渠道.所有的接口请求.应答都是xml格式报文,这样就需要用到xml格式报文的拼装和解析,这儿简单讲一下. 拼接xml格式报文. 从页面表单提交和配 ...

  5. LinearLayout-margin不起作用的处理

    1.如果LinearLayout中使用android:layout_marginRight不起作用,通过测试原来在android2.x中,如果一个控件中有android:layout_gravity属 ...

  6. Android NineGridLayout — 仿微信朋友圈和QQ空间的九宫格图片展示自定义控件

    NineGridLayout 一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件. GitHub:https://github.com/HMY314/NineGridLayout 一.介绍 1.当只 ...

  7. 很好的资源 for android

    //texttospeach http://examples.javacodegeeks.com/android/core/text-to-speech/android-text-to-speech- ...

  8. VMware Tools安装问题的解决

    一.VMware Tools工具的作用 VMware虚拟机的插件工具,安装上它可以实现主机与虚拟机的文件共享及拖放.简单的说就是从Ubuntu上边经常输入命令行会出现错误的情况,需要复制到Window ...

  9. 【2017中国大学生程序设计竞赛 - 网络选拔赛】A Secret

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6153 [题意] ,S2中出现的次数与其长度的乘积之和.  [题解] 扩展KMP的模板题. 首先,把S2和 ...

  10. 洛谷——P3817 小A的糖果

    https://www.luogu.org/problem/show?pid=3817 题目描述 小A有N个糖果盒,第i个盒中有a[i]颗糖果. 小A每次可以从其中一盒糖果中吃掉一颗,他想知道,要让任 ...