使用原生ajax处理json组成的数组

时间：2021-08-24 22:43:24

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

  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字符串&lpar;简单介绍&rpar;

    什么是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&period;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&plus;ajax传输json数组以及单条数据的方法

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

随机推荐

  1. Sublime无法使用package control安装插件

    我之前想通过安装sftp,但是出现了这个问题,百度了很久才解决.东西也是从网上找的,现总结下:   网上说什么安装个新的,我也是简直醉了,其实新的并不好使. 但是,我们最好安装个新的,再继续下面的操作 ...

  2. 转载大神的dfs讲解

    http://acm.hdu.edu.cn/forum/read.php?tid=6158 看完明白了好多! 关于剪枝,没有剪枝的搜索不太可能,这题老刘上课的时候讲过两个剪枝,一个是奇偶剪枝,一个是路 ...

  3. Send User to a Portal Folder

    Sometimes you would want to give users the option to click a button on the page and send them back t ...

  4. supervisor 部署文档

    supervisor 部署文档 supervisor 需要Python支持,如果不用系统的supervisor,单独安装python python 安装 #依赖 yum install python- ...

  5. 『C &num; 开发』VS 2008 修改默认生成代码模版

    作为Coder,或许会因为每次写代码前要把版权信息Ctrl+C/V上去而蛋疼   ╮(╯▽╰)╭ 可作为Code Copyer,又何尝不蛋疼呢,怎么会容忍作业上署上别人的姓名,学号,XXX 还是要先S ...

  6. C语言库函数探究

    1.strlen()求字符串长度 //模拟实现strlen函数 #include<stdio.h> #include<stdlib.h> #include<string. ...

  7. C&plus;&plus; 虚指针、成员变量与类对象的偏移地址

    先给出一段代码实现 #include <iostream> using namespace std; class animal { protected: int age; public: ...

  8. 工控随笔&lowbar;04&lowbar;西门子&lowbar;解决Step 7软件因授权问题不能打开的方式和方法

    西门子的软件是授权软件,只有经过授权认证的用户才能使用,如果没有通过授权认证则不能 正常的使用软件的相关功能. 一.西门子授权不成功问题 如上图所示报故障代码: 000001-0505.报警文本为:未 ...

  9. 5N - 考试排名

    C++编程考试使用的实时提交系统,具有即时获得成绩排名的特点.它的功能是怎么实现的呢? 我们做好了题目的解答,提交之后,要么“AC”,要么错误,不管怎样错法,总是给你记上一笔,表明你曾经有过一次错误提 ...

  10. libgdx相关知识点

    Gdx.graphics.setContinuousRendering(false); 设置图像为非连续自动渲染. 设置Opengl的混合模式,支持alpha属性 Gdx.gl.glBlendFunc ...

相关文章