我们使用得还是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. 51nod DP 最大子段和

    #include<iostream> #include<algorithm> #include<cstdio> #define MAXN 50000 using n ...

  2. Spring IOC容器创建对象的方式

    一.无参构造函数创建                                                                            我们用Spring创建Stu ...

  3. 基于CentOS-7.2.15的Mono+jexus镜像

    公司开发及测试的linux环境为CentOS-7.X,因此以CentOS-7.2.15作为基础镜像,镜像尺寸确实比较大,最终Mono-4.6.0.125+Jexus-5.8.1.10镜像尺寸已将近1G ...

  4. 更新/替换系统 hosts，轻松访问国外站点

    更新 hosts 下面介绍的操作均可能覆盖现有 hosts ,进行操作前请先确认是否需要备份. 推荐使用本项目的 Host Tools 来自动化 备份/配置 工作. 若更新 hosts 未立即生效,请 ...

  5. php-fpm中启用慢日志配置（用于检测执行较慢的PHP脚本）

    虽然通过nginx accesslog可以记录用户访问某个接口或者网页所消耗的时间,但是不能清晰地追踪到具体哪个位置或者说函数慢,所以通过php-fpm慢日志,slowlog设置可以让我们很好的看见哪 ...

  6. PHP实现linux命令tail -f

    PHP实现linux命令tail -f 今天突然想到之前有人问过我的一个问题,如何通过PHP实现linux中的命令tail -f,这里就来分析实现下. 这个想一想也挺简单,通过一个循环检测文件,看文件 ...

  7. 向shell脚本中传入参数

    写一个 程序名为    test.sh    可带参数为 start 和 stop 执行  test.sh start执行  start 内容的代码 执行 test.sh stop 执行 stop 内 ...

  8. 日常资料(TNB)

    http://www.med66.com/html/2005/5/hu47563183418550025733.html http://www.guokr.com/article/192045/ ht ...

  9. 利用HTML5定位功能，实现在百度地图上定位

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. Android开发笔记之《JNI常用知识汇总》

    参考资料: Android Studio中NDK开发 : http://www.tuicool.com/articles/NBjQnyAndroid Studio使用新的Gradle构建工具配置NDK ...