和前一篇文章一样，直接上代码了，只是做个记录。

  1. 数据的提供页面，tigong.php

    <?php
    
header("content-type:text/html;charset=utf-8");
    
echo '[{"name":"黎明","age":"12","sex":"男"},{"name":"小红","age":"12","sex":"女"},{"name":"增益","age":"22","sex":"男"}]';
    
?>
  2. 使用eval得方法处理 
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <script type="text/javascript">
    
        window.onload=function(){
    
            var div1=document.getElementById("div1");
    
            var bt1=document.getElementById("bt1");
    
            bt1.onclick=function(){
    
                //创建ajax对象，写兼容
    
                if(window.XMLHttpRequest){
    
                    var xmlHttp=new XMLHttpRequest();
    
                }else{
    
                    var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    
                };
    
                //获取要发送的数据，我们这个例子没有
    
                //设置发送数据的地址和方法
    
                xmlHttp.open("POST","tigongjson.php");
    
                //设置我们的请求头信息
    
                xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    
                //绑定onreadystatechange事件
    
                xmlHttp.onreadystatechange=function(){
    
                    if(xmlHttp.readyState==4 && xmlHttp.status==200){
    
                        var data=xmlHttp.responseText;
    
                        //json字符串转换成为json对象
    
                        data=eval("("+data+")");
    
                        var str="";
    
                        for(var i=0;i<data.length;i++){
    
                            str+="姓名"+data[i].name+"<br>";
    
                            str+="年龄"+data[i].age+"<br>";
    
                            str+="性别"+data[i].sex+"<br>";
    
                            };
    
                            div1.innerHTML=str;
    
                    };
    
                };
    
                //发送数据
    
                xmlHttp.send();
    
            };
    
        };
    
    </script>
    
    <style type="text/css">
    
        #div1{
    
            width:200px;
    
            height:200px;
    
            background:#f00;
    
            color:#fff;
    
        }
    
        img{
    
            width:200px;
    
        }
    
    </style>
    
    <title>Document</title>
    
</head>
    
<body>
    
    <div id="div1">
    
        <img src="../php2/images/1.gif">
    
    </div>
    
    <br>
    
    <button id="bt1">点击获取json数据</button>
    
</body>
    
</html>
  3. 使用JSON.parse()方法进行处理 
    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <script type="text/javascript">
    
        window.onload=function(){
    
            var div1=document.getElementById("div1");
    
            var bt1=document.getElementById("bt1");
    
            bt1.onclick=function(){
    
                //创建ajax对象，写兼容
    
                if(window.XMLHttpRequest){
    
                    var xmlHttp=new XMLHttpRequest();
    
                }else{
    
                    var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    
                };
    
                //获取要发送的数据，我们这个例子没有
    
                //设置发送数据的地址和方法
    
                xmlHttp.open("POST","tigongjson.php");
    
                //设置我们的请求头信息
    
                xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    
                //绑定onreadystatechange事件
    
                xmlHttp.onreadystatechange=function(){
    
                    if(xmlHttp.readyState==4 && xmlHttp.status==200){
    
                        var data=xmlHttp.responseText;
    
                        //json字符串转换成为json对象
    
                        data=JSON.parse(data);
    
                        var str="";
    
                        for(var i=0;i<data.length;i++){
    
                            str+="姓名:"+data[i].name+"<br>";
    
                            str+="年龄:"+data[i].age+"<br>";
    
                            str+="性别:"+data[i].sex+"<br>";
    
                            };
    
                        div1.innerHTML=str;
    
                    };
    
                };
    
                //发送数据
    
                xmlHttp.send();
    
            };
    
        };
    
    </script>
    
    <style type="text/css">
    
        #div1{
    
            width:200px;
    
            height:200px;
    
            background:#f00;
    
            color:#fff;
    
        }
    
        img{
    
            width:200px;
    
        }
    
    </style>
    
    <title>Document</title>
    
</head>
    
<body>
    
    <div id="div1">
    
        <img src="../php2/images/1.gif">
    
    </div>
    
    <br>
    
    <button id="bt1">点击获取json数据</button>
    
</body>
    
</html>

使用原生ajax处理json组成的数组的更多相关文章

  1. ajax请求 json格式和数组格式总结

    php echo json_encode($data); $.ajax({ url:APP+"?a=total&c=collection", //请求的页面 type:&q ...

  2. 使用原生ajax处理json字符串

    我们使用得还是wamp,如果不知道环境怎么搭建,请在我的日志里面找,此处不在累赘. 什么是json?JSON的全称是 Javascript Object Notation(javascript对象表示 ...

  3. 原生ajax接收json字符串(简单介绍)

    什么是json? JSON的全称是 Javascript Object Notation(javascript对象表示法),是基于javascript对象字面量,如果单从眼睛看,JSON里的数据是被保 ...

  4. 原生ajax请求json数据

    <?php header("content-type:text/html;charset=utf-8"); echo '{"name":"小明& ...

  5. Servlet处理原生Ajax请求

    萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介      Ajax(Asynchronous JavaScript and XML,异步JavaScript和 ...

  6. jquery解析php通过ajax传过来的json二维数组对象

    ajax获得php传过来的json二维数组对象,jquery解析 php代码: <?php $news = array( '武汉'=>array(1,2,3), '广州'=>arra ...

  7. ASP.NET MVC Controller接收ajax post方式发送过来的json对象或数组数据

    本例旨在说明我的一种Controller接收ajax提交(POST)过来的json对象或数组信息的方式,感觉应该有更好的方式,欢迎提出宝贵意见. JSON.stringify(jsonObj)不支持I ...

  8. ajax数据请求3（数组json格式）

    ajax数据请求3(数组json格式) <!doctype html> <html> <head> <meta charset="utf-8&quo ...

  9. Springboot+ajax传输json数组以及单条数据的方法

    Springboot+ajax传输json数组以及单条数据的方法 下面是用ajax传输到后台单条以及多条数据的解析的Demo: 结构图如下: 下面是相关的代码: pom.xml: <?xml v ...

随机推荐

  1. 反射在ADO.NET中的运用（你还在每个项目中循环遍历DataTable吗）

    图片有点大哈,但大更能说明问题.您是不是每个项目都在重复的做图片中的事情-----循环把数据库中返回的表转化为实体对象.是不是每次都在抱怨这样的重复工作.字段越多抱怨越多!不用抱怨了.当你看到这篇文章 ...

  2. RSVP协议的基本概念介绍

    2010-06-12 14:12 佚名 互联网 字号:T | T 对于RSVP协议的简单介绍和图解.通过文章,我们将对这个含义的基本概念和结构,以及工作方式等方面的知识有所了解.希望对大家有所帮助. ...

  3. QueryRunner类 的應用，以及ResultSetHandler 接口的实现类

    1 .该接口用于处理 java.sql.ResultSet,将数据按要求转换为另一种形式. ResultSetHandler 接口提供了一个单独的方法:Object handle (java.sql. ...

  4. 用 CSS 隐藏页面元素

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...

  5. windows下编译chromium浏览器的15个流程整理

    编译chromium 系统为windows, 国内在windows上编译chromium的资料比较少, 我这篇文章只能作为参考, 记录我遇到的一些问题,因为chromium团队也会修改了代码,或者编译 ...

  6. Deepin 15.3 编译同步SudaMod 2.0

    1.设置hosts,方便访问国外站点 $ wget https://raw.githubusercontent.com/racaljk/hosts/master/hosts -qO /tmp/host ...

  7. java高新技术-可变参数与OverLoad相关面试题分析

    可变参数 可变参数的特点: 只能出现在参数列表的最后: ...位于变量类型和变量名之间,前后有无空格都可以: 调用可变参数的方法时,编译器为该可变参数隐含创建一个数组,在方法中以数组的形式访问可变参数 ...

  8. Leetcode 255. Verify Preorder Sequence in Binary Search Tree

    验证一个list是不是一个BST的preorder traversal sequence. Given an array of numbers, verify whether it is the co ...

  9. Python【第二章】：Python的数据类型

    基本数据类型 一.整型 如: 18.73.84 二.长整型 如:2147483649.9223372036854775807 三.浮点型 如:3.14.2.88 四.字符串 如:'wupeiqi'.' ...

  10. SpringBoot源码分析：spring的基本架构

    在深入了解springboot之前,我们需要了解spring,springboot本身就是基于spring而构建:是微服务架构中一个比较流行的框架:类似spring提供了一套完整的微服务方案如spri ...