我们使用得还是wamp，如果不知道环境怎么搭建，请在我的日志里面找，此处不在累赘。

  1. 什么是json？
    JSON的全称是 Javascript Object Notation（javascript对象表示法），是基于javascript对象字面量，如果单从眼睛看，JSON里的数据是被保存在花括号里面-- {},如果在用途上面进一步分析，JSON是一种数据交换格式。JSON内部以 名称:值这种格式排列，如下面的json1，就是一个json对象。
  2. var json1={"name":"李明","age":21,"sex":"boy"}

    什么是json字符串？
    如其字面意思，给json两边加上双引号（或者单引号），为了避免与内部的双引号冲突，我们这外面放单引号，就成了json字符串了，如下面的json2

    var json2='{"name":"李明","age":21,"sex":"boy"}'

    2.在我们的数据提供页面，输出我们的json，我们还是把数据提供页面称为tigong.php

代码如下：

<?php

header("content-type:text/html;charset=utf-8");

echo '{"name":"黎明","age":"12","sex":"男"}';

?>

3.在我们的前端页面接收数据，并且使用eval方法将json字符串解析成为json对象，用for循环将它遍历出来。我们称这个页面为testJsonEvel.html

<!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="";

                        str+="姓名:"+data.name+"<br>";

                        str+="年龄:"+data.age+"<br>";

                        str+="性别:"+data.sex

                        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>

evel不存在兼容性问题，但是会有安全漏洞。

效果如图：

4.使用JSON.parse方法将json字符串解析称为json对象，我们把这个页面称为testJsonParse.html,代码如下

<!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="";

                        str+="姓名:"+data.name+"<br>";

                        str+="年龄:"+data.age+"<br>";

                        str+="性别:"+data.sex

                        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>

JSON.parse不存在安全漏洞，但是会有兼容性，IE8及以下不支持。

效果如图

使用原生ajax处理json字符串的更多相关文章

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

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

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

    和前一篇文章一样,直接上代码了,只是做个记录. 数据的提供页面,tigong.php <?php header("content-type:text/html;charset=utf- ...

  3. @RequestBody接收ajax的json字符串

    在使用ajax进行请求,并传递参数时,偶尔需要把数组作为传递参数,这是就要使用@RequestBody来解决这个问题 在页面端的处理: (1)利用JSON.stringify(arr)需要把json对 ...

  4. IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例

    案例需求:客户端发送AJAX请求服务器端获取用户信息的数据. 案例实现: 在服务器端要将Java对象转换成JSON字符串,如果使用拼接JSON字符串的方式非常繁琐,并且非常容易出错,所以一般会借助第三 ...

  5. Ajax 传递json字符串到客户端时报 Internal server error

    架构:struts2+JQuery 需求:就是前台请求后台,后台查询数据库,将数据转换成json格式,使用struts2框架赋值给action内的变量jsonStr,前台通过 response.jso ...

  6. 原生ajax请求json数据

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

  7. 【JSON】Ajax获得JSON字符串的处理方法

    一. success : function(data){ var caseInfoView = eval('('+data.caseInfoView+')'); for(var key in case ...

  8. Servlet处理原生Ajax请求

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

  9. 大话Json对象和Json字符串

    一.Json对象和Json字符串的区别 (1)Json对象:可以通过javascript存取属性. 先介绍一下json对象,首先说到对象的概念,对象的属性是可以用:对象.属性进行调用的.例如: var ...

随机推荐

  1. 微信快速开发框架（七）--发送客服信息，版本更新至V2.2 代码已更新至github

    在V2版本发布的博文中,已经介绍了大多数Api的用法,同时也收到了很多意见,其中发布了几个修正版本,修改了几个bug,在此感谢大家的使用,有了大家的支持,相信快速开发框架会越来越好,也会越来越完善的. ...

  2. 【.NET】Nuget包，把自己的dll放在云端

    //发布自己的nuget包,1.自己的api KEY,2.自己的类库,3.nuget打包工具https://npe.codeplex.com/releases/view/620126          ...

  3. C#线程池使用

    bool stop; private void button3_Click(object sender, EventArgs e) { if(button3.Text=="线程池" ...

  4. 解决Java接口内部类的main()方法无法打印输出的问题

    问题源自<Thinking in Java>关于内部类的章节,例子如下: public interface ClassInInterface{ void howdy(); public c ...

  5. NOIp2016 十连测 round1

    Claris大爷出的一套模拟题.问别人要到了一份题,加深了自己NOIp要滚粗的感觉. Matser zzDP题,我只能说我第一遍写的时候还写崩了QAQ. //master //by Cydiater ...

  6. Root--超级用户

    http://www.shuame.com/root/  root (计算机术语言) ROOT存在于Linux系统.UNIX系统(如AIX.BSD等)和类UNIX系统(如稳定到服务器都在用的Debia ...

  7. fedora 24 使用扇贝网页版没有声音

    (扇贝的官方答疑:https://www.shanbay.com/help/faq/no_voice/) 第4步下载MP3测试文件没办法使用: 似乎因为MP3格式的文件是的版权问题. 打算安装能处理M ...

  8. 图解TCP、IP笔记

    七层:应用层.表示层.会话层.传输层.网络层.数据链路层.物理层 应用层:与通信无关的功能 表示层:例如转换编码格式 会话层:采用哪种连接方法 传输层以下: 传输层:确立连接与断开连接重发 网络层:从 ...

  9. MySql 里的IFNULL、NULLIF和ISNULL用法区别

    mysql中isnull,ifnull,nullif的用法如下: isnull(expr) 的用法:如expr 为null,那么isnull() 的返回值为 1,否则返回值为 0. mysql> ...

  10. NOSDK--一键打包的实现（四）

    1.4 打包及签名的脚本介绍 我们使用ant来实现打包,这节我们先介绍脚本内容,关于脚本环境配置问题,我们将在下节做一个详细的介绍. 首先我们来看下build_android/tools/platfo ...