我们使用得还是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. jQuery.extend和jQuery.fn.extend的区别【转】

    解释的很有意思,清晰明了又有趣,转来分享下,哈哈哈 jQuery.extend和jQuery.fn.extend的区别,其实从这两个办法本身也就可以看出来.很多地方说的也不详细.这里详细说说之间的区别 ...

  2. Servlet和JSP学习指导与实践（三）:JSP助阵

    前言: JSP(Java Server Page)虽然作为一门服务端的语言,但它并没有创新新的语言标准.有些人一接触jsp之后发现易学易懂.实际上,jsp的内部原理仍然是基于Servlet,它是Ser ...

  3. Python学习笔记 之 函数

    函数 函数式编程最重要的是增强代码的重用性和可读性  定义和使用 def 函数名(参数): ... 函数体 ... 返回值 函数的定义主要有如下要点: def:表示函数的关键字 函数名:函数的名称,日 ...

  4. java 中的Scanner

    java.util.Scanner是Java5的新特征,主要功能是简化文本扫描.这个类最实用的地方表现在获取控制台输入,其他的功能都很鸡肋,尽管Java API文档中列举了大量的API方法,但是都不怎 ...

  5. IBatisNet使用教程

     1.是数据持久层,对应.NET方向的有Ibatis.NET,只要用来处理数据库表结构和程序实体之间映射,ado.net是用来处理和数据库直接通信的,取出数据(object,int,string,da ...

  6. Html特殊字符表

    原始字符 entity 原始字符 entity " " & & ' ' < < > >     ¡ ¡ ¢ ¢ £ £ ¤ ¤ ¥ ¥ ¦ ...

  7. animate对颜色设置不起作用

    今天了解了一下stop的使用方法,但是实例中加入color:red的时候,动画效果没有实现,具体实例如下: http://jsbin.com/fezaroyene/edit?html,js,outpu ...

  8. Windows综合应用

    待修改中-------------------------------------- 快捷键部分: Win+E:打开"我的电脑"E:Explot的缩写,即资源管理器. ------ ...

  9. 自然语言26_perplexity信息

    http://www.ithao123.cn/content-296918.html 首页 > 技术 > 编程 > Python > Python 文本挖掘:简单的自然语言统计 ...

  10. arcgis desktop 10.1 license manager无法启动问题解决

    19:44:36 (ARCGIS) Vendor daemon can't talk to lmgrd (License server machine is down or not respondin ...