使用原生ajax处理json字符串
我们使用得还是wamp,如果不知道环境怎么搭建,请在我的日志里面找,此处不在累赘。
- 什么是json?
JSON的全称是 Javascript Object Notation(javascript对象表示法),是基于javascript对象字面量,如果单从眼睛看,JSON里的数据是被保存在花括号里面-- {},如果在用途上面进一步分析,JSON是一种数据交换格式。JSON内部以 名称:值这种格式排列,如下面的json1,就是一个json对象。 var json1={"name":"李明","age":21,"sex":"boy"}
什么是json字符串?
如其字面意思,给json两边加上双引号(或者单引号),为了避免与内部的双引号冲突,我们这外面放单引号,就成了json字符串了,如下面的json2var 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字符串的更多相关文章
- 原生ajax接收json字符串(简单介绍)
什么是json? JSON的全称是 Javascript Object Notation(javascript对象表示法),是基于javascript对象字面量,如果单从眼睛看,JSON里的数据是被保 ...
- 使用原生ajax处理json组成的数组
和前一篇文章一样,直接上代码了,只是做个记录. 数据的提供页面,tigong.php <?php header("content-type:text/html;charset=utf- ...
- @RequestBody接收ajax的json字符串
在使用ajax进行请求,并传递参数时,偶尔需要把数组作为传递参数,这是就要使用@RequestBody来解决这个问题 在页面端的处理: (1)利用JSON.stringify(arr)需要把json对 ...
- IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例
案例需求:客户端发送AJAX请求服务器端获取用户信息的数据. 案例实现: 在服务器端要将Java对象转换成JSON字符串,如果使用拼接JSON字符串的方式非常繁琐,并且非常容易出错,所以一般会借助第三 ...
- Ajax 传递json字符串到客户端时报 Internal server error
架构:struts2+JQuery 需求:就是前台请求后台,后台查询数据库,将数据转换成json格式,使用struts2框架赋值给action内的变量jsonStr,前台通过 response.jso ...
- 原生ajax请求json数据
<?php header("content-type:text/html;charset=utf-8"); echo '{"name":"小明& ...
- 【JSON】Ajax获得JSON字符串的处理方法
一. success : function(data){ var caseInfoView = eval('('+data.caseInfoView+')'); for(var key in case ...
- Servlet处理原生Ajax请求
萌新小白人生中的第一篇博客,难免会有差错,还望各位大佬多多包涵. 1. Ajax技术简介 Ajax(Asynchronous JavaScript and XML,异步JavaScript和 ...
- 大话Json对象和Json字符串
一.Json对象和Json字符串的区别 (1)Json对象:可以通过javascript存取属性. 先介绍一下json对象,首先说到对象的概念,对象的属性是可以用:对象.属性进行调用的.例如: var ...
随机推荐
- BZOJ 1005 [HNOI2008] 明明的烦恼(组合数学 Purfer Sequence)
题目大意 自从明明学了树的结构,就对奇怪的树产生了兴趣...... 给出标号为 1 到 N 的点,以及某些点最终的度数,允许在任意两点间连线,可产生多少棵度数满足要求的树? Input 第一行为 N( ...
- console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(5))调用解析
console.log((function f(n){) ? n * f(n-) : n)})()); 5被传入到函数,函数内部三元计算,5 > 1成立,运算结果是5*f(4),二次运算,5*4 ...
- 消息中间件:RabbitMQ基本探索
RabbitMQ是一个基于AMQP协议(Advanced Message Queuing Protocol,一个提供统一消息服务的应用层标准高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中 ...
- NGUI 滑动与点击事件冲突处理
弄一个既能滑动,又能点击的Scroll View.发现弄完后不能拖动了~ 因为点击事件需要Box Collider覆盖掉了Drag Scroll View的Box Collider.注意是Drag S ...
- AngularJS 的嵌套路由 UI-Router
AngularJS 的嵌套路由 UI-Router 本篇文章翻译自:https://scotch.io/tutorials/angular-routing-using-ui-router 演示网站请查 ...
- BZOJ1483: [HNOI2009]梦幻布丁
传送门 名字起得很高端实际上很简单的算法hhh 启发式合并 简单讲就是一些合并一堆队列的题可以用启发式合并,或者说这是一个思想.每次把小的合并到大的部分,均摊复杂度$O(MlogN)$. //BZOJ ...
- 高斯混合模型(GMM)
复习: 1.概率密度函数,密度函数,概率分布函数和累计分布函数 概率密度函数一般以大写“PDF”(Probability Density Function),也称概率分布函数,有的时候又简称概率分布函 ...
- 在Application中集成Microsoft Translator服务之使用http获取服务
一.创建项目 首先我们来创建一个ASP.NET Application 选择时尚时尚最时尚的MVC,为了使演示的Demo更简单,这里选择无身份验证 二.创建相关类 项目需要引入之前两个类AdmAcce ...
- java 实现文件下载
需求:把每天产生的日志文件,从服务器上下载下来 File file = new File(path); // 根据路径,获取File String filename = file.getName(); ...
- tyvj1202 数数食物链
描述 TsyD学习了生物的生态环境那一张后,老师留了一项作业,就是给一张食物网,求所有食物链的总数.(从最低营养级生物(它不能吃任何其他的生物)开始到最高营养级(它不能被任何其他生物吃) 叫做一条食物 ...