我们使用得还是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. Nhibernate Query By Criteria 条件查询

    HQL运算符 QBC运算符 含义 = Restrictions.eq() 等于equal <> Restrictions.ne() 不等于not equal > Restrictio ...

  2. c#JS调用

    using MSScriptControl; using System; using System.Collections.Generic; using System.Reflection; usin ...

  3. C#-WinForm-发送邮件

    进入邮箱→打开设置→变为启用状态 发送前准备:发件人.发件人密码.收件人.标题.内容 在<发送>按钮中设置事件 一.引用 System.Net; 和 System.Net.Mail; 命名 ...

  4. 教你一招：根据身份证号计算出生年月和年龄 text函数和mid函数混用 datedif函数和today函数混用

    在电子表格Excel中,使用text函数和mid函数混用,根据身份证号计算出生年月: =text(mid(A2,,),"0!/00!/00") #0!/00!/00 为日期的格式# ...

  5. SpringBoot源码解析：AOP思想以及相应的应用

    spring中拦截器和过滤器都是基于AOP思想实现的,过滤器只作用于servlet,表现在请求的前后过程中:拦截器属于spring的一个组件,由spring管理, 可以作用于spring任何资源,对象 ...

  6. 《Python核心编程》 18.多线程编程（一）

    一进程和线程 1参考链接: http://www.zhihu.com/question/25532384 中OF小工和zhonyong 的回答 总结他们两的回答: 引言: 1.电脑的运行,在硬件上是C ...

  7. 如何夯实（Java）编程基础，并深入学习和提高

    如何夯实(Java)编程基础,并深入学习和提高? 240赞同反对,不会显示你的姓名 匿名用户 240 人赞同 多学习...网上自学的学习网站很多,见以下榜单~一.汇总榜单: 公开课_学习网站导航 收录 ...

  8. c++ 虚函数

    class A { public: virtual void f();//希望派生类重写 void fun();//绝大多数情况下不要重新定义基类的非虚函数,那样会打破公有继承Is-A的关系,而且行为 ...

  9. tail -f 和 -F 的用法

    tail -f 和 -F 的用法  Tai 2010-08-16 16:03:18 -f 是--follow[=HOW]的缩写, 可以一直读文件末尾的字符并打印出来."[=HOW]" ...

  10. 使用Java 多线程编程 让三个线程轮流输出ABC，循环10次后结束

    简要分析: 要求三个线程轮流输出,这里我们要使用一个对象锁,让关键部分的代码放入同步块当中.同时要有一个变量记录打印的次数到达10次循环后不再打印,另外一个就是要给每个线程一个标志号,我们根据标识号来 ...