我们使用得还是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. Fluent Nhibernate之旅（五）--利用AutoMapping进行简单开发

    Fluent Nhibernate(以下简称FN)发展到如今,已经相当成熟了,在Nhibernate的书中也相应的推荐了使用FN来进行映射配置,之前写的FN之旅至今还有很多人会来私信我问题,说来惭愧, ...

  2. mysql数据库表结构导出

    mysql数据库表结构导出 命令行下具体用法如下: mysqldump -u用戶名 -p密码 -d 数据库名 表名 > 脚本名; 导出整个数据库结构和数据 mysqldump -h localh ...

  3. Java链栈

    package com.lxm.customDataStructure; public class LinkStack<T>{ class Node<T>{ T data; N ...

  4. jeecg小吐槽

    1.online开发出来的表单,字段中设置的默认值,新建表单的时候不会出来,要保存后才会在后台补加进去!(为时已晚吧) 2.online开发出来的表单,主表中的附表,在online配置界面指定了可以为 ...

  5. 数据结构图文解析之：栈的简介及C++模板实现

    0. 数据结构图文解析系列 数据结构系列文章 数据结构图文解析之:数组.单链表.双链表介绍及C++模板实现 数据结构图文解析之:栈的简介及C++模板实现 数据结构图文解析之:队列详解与C++模板实现 ...

  6. SqlServer基础复习

    一.数据类型      包括整数类型(可以用来做主键)的如bit,int ,samllint,tinyint,bigint,存储的范围不同,常用的有int,bigint等:树脂类型decimal(p, ...

  7. js 数据类型 typeof的测试

    , t2 = ', t3 = null, t4 = NaN, t5 = undefined, t6 = function() {}, t7 = true, t8 = window, t9 = docu ...

  8. C#把DataTable中数据一次插入数据库的方法

    现在实际的情况是这样的: 客户有一台打卡机,员工打卡的信息全部储存在打卡机的Access数据库里面,现在客户引入了一种新的管理系统,需要将Access数据库中的打卡数据同步到SQL Server数据库 ...

  9. 零基础如何系统学习Java Web

    零基础如何系统学习Java Web?   我来给你说一说 你要下决心,我要转行做开发,这样你才能学成. 你要会打字,我公司原来有一个程序员,打字都是两个手一指禅,身为程序员你一指禅怎么写出的代码,半个 ...

  10. 解决COM组件80070005错误

    前段时间在维护公司以前的项目时遇到一个问题,客户需要添加一个word文档合并功能,按理说这功能比较好实现,只要调用Office自带的COM组件就搞定了,但实际上并非如此,在客户端部署上以后运行报错,提 ...