ajax技术返回json如何处理
json只是一种文本字符串。
ajax如何处理json数据格式
①json的格式如下:
"{属性名:属性值,属性名:属性值}"。
因为json数据是原生态的,因此这种数据格式很稳定,而且描述能力很强,我们建议使用json数据。
register.php
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<meta charset="utf-8">
<script language="javascript" type="text/javascript" >
//创建ajax引擎
function getXmlHttpObject(){ var xmlHttpRequest;
//不同浏览器获取xmlHttpRequest对象方法不一样
if(window.ActiveXObject){
//window.alert("ie");
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}else{
//window.alert("no ie");
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
} var myXmlHttpRequest="";
//验证用户名是否存在
function checkName(){ myXmlHttpRequest=getXmlHttpObject();
//怎么判断创建ok
if(myXmlHttpRequest){
var url="/registerProcess.php";
//这个是要发送的数据
var data="username="+$("username").value;
//打开请求,准备发送,,true表示同步处理
myXmlHttpRequest.open("post", url, true);
//还有一句话,这句话必须
//在编程过程中,建议用Post,post会更好一些
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数.chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli; //真的发送请求,如果是get请求则填入 null即可
//如果是post请求,则填入实际的数据
myXmlHttpRequest.send(data);
//状态改变的触发器
//myXmlHttpRequest.open("get");
}else{
//window.alert("创建失败");
} } //回调函数
function chuli(){
//window.alert("处理函数被调回"+myXmlHttpRequest.readyState);
//我要取出从regiseterPro.php页面返回的数据
if(myXmlHttpRequest.readyState==4){
var mes=myXmlHttpRequest.responseText;
//window.alert(mes);
//使用eval函数将mes字串,转成对应的对象
var mes_obj=eval("("+mes+")");
/*window.alert(mes_obj.res);
window.alert(mes_obj.id);
window.alert(mes_obj.date);*/
$("myres").value=mes_obj.res;
}
} function $(id){
return document.getElementById(id);
} </script>
</head>
<body>
<form > 用户名字<input type="text" name="username1" id="username" /><input type="button" value="验证用户名" onclick="checkName()"/>
<input type="text" style="border-width:0;color:red" id="myres"/>
<br/>
用户密码<input type="password" name="password" id="password"/><br/>
电子邮件<input type="text" name="email" id="email"/><br/>
<input type="submit" value="用户注册"/><br/><br/> 用户名字<input type="text" name="username1" />
<input type="text" style="border-width:0;color:red"/>
<br/>
用户密码<input type="password" name="password"/><br/>
电子邮件<input type="text" name="email"/><br/>
<input type="button" value="用户注册"/> </form>
</body> </html>
registerProcess.php
<?php
//这里两句话很重要,第一句话告诉浏览器返回的数据是xml格式
header("Content-type: text/html; charset=utf-8");
//如果这里写成Content-type: text/html,会报错,得不到数据
//告诉浏览器不要缓存数据
header("Cache-Control:no-cache");
//接收数据(这里要和请求方式对应 _POST 还是 _GET
$username=$_POST['username']; $info="";
if($username=="shunping"){
$info='{"res":"该用户不可以用","id":"a001","date":"2011-11-11"}';//注意,这里数据是返回给请求的页面
}else if($username!=""){
$info='{"res":"该用户可以用","id":"a001","date":"2011-11-11"}';
}
echo $info; ?>
JSON(Javascript Object Notation)一种简单地数据格式,比xml更轻巧。
JSON是JavaScript原生格式,这意味着在javascript中处理JSON数据不需要任何特殊的API或工具包。
JSON数据格式很严格。
JSON的规则很简单:对象是一个无序的“”名称/值‘对’集合。
var mes=eval("("+'{"res":"该用户可以用","id":"a001","date":"2011-11-11"}'+")");
window.alert(mes.res);
//该代码可以运行
如同:
var mes_obj=eval("("+mes+")");
window.alert(mes_ob.res);
访问一组json数据。
var dogs=[{"name":"小明","age":"8"},{"name":"小狗","age":"3"}];
window.alert(dogs[0].name);
window.alert(dogs[0].age); window.alert(dogs[1].name);
window.alert(dogs[1].age);
②json数据格式的扩展
如果服务器返回的json是多组数据,则格式应当如下:
$info="[{"属性名":"属性值",....},{"属性名":"属性值",....},...]";
在xmlhttprequest对象接收到json数据后,应当这样处理
//转成对象数组
var reses=eval("("+xmlhttprequest.responseText+")");
//通过reses可以取得你希望的任何一个值 reses[i].属性值
复杂的json数据读取
var people={
"programmers":
[
{"firstName":"Brett", "email":"brett@"},
{"firstName":"Jason", "email":"jason@"}
],
"writer":
[
{"writer1":"宋江","age":"50"},
{"writer2":"吴用","age":"30"}
],
"sex":"男"
}; window.alert(people.programmers[0].firstName);
window.alert(people.writer[1].age);
window.alert(people.sex);
register.php
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<meta charset="utf-8">
<script language="javascript" type="text/javascript" >
//创建ajax引擎
function getXmlHttpObject(){ var xmlHttpRequest;
//不同浏览器获取xmlHttpRequest对象方法不一样
if(window.ActiveXObject){
//window.alert("ie");
xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
}else{
//window.alert("no ie");
xmlHttpRequest=new XMLHttpRequest();
}
return xmlHttpRequest;
} var myXmlHttpRequest="";
//验证用户名是否存在
function checkName(){ myXmlHttpRequest=getXmlHttpObject();
//怎么判断创建ok
if(myXmlHttpRequest){
var url="/registerProcess.php";
//这个是要发送的数据
var data="username="+$("username").value;
//打开请求,准备发送,,true表示同步处理
myXmlHttpRequest.open("post", url, true);
//还有一句话,这句话必须
//在编程过程中,建议用Post,post会更好一些
myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//指定回调函数.chuli是函数名
myXmlHttpRequest.onreadystatechange=chuli; //真的发送请求,如果是get请求则填入 null即可
//如果是post请求,则填入实际的数据
myXmlHttpRequest.send(data);
//状态改变的触发器
//myXmlHttpRequest.open("get");
}else{
//window.alert("创建失败");
} } //回调函数
function chuli(){
//window.alert("处理函数被调回"+myXmlHttpRequest.readyState);
//我要取出从regiseterPro.php页面返回的数据
if(myXmlHttpRequest.readyState==4){
var mes=myXmlHttpRequest.responseText; //使用eval函数将mes字串,转成对应的对象
var mes_obj=eval("("+mes+")");
//取出第一组信息的res
/*window.alert(mes_obj[1].id);
$("myres").value=mes_obj[0].res;*/
//window.alert(mes_obj[1].age);
//如果你希望遍历返回的json数据
for(var i=0;mes_obj.length;i++){
window.alert(mes_obj[i].res);
}
}
} function $(id){
return document.getElementById(id);
} </script>
</head>
<body>
<form > 用户名字<input type="text" name="username1" id="username" /><input type="button" value="验证用户名" onclick="checkName()"/>
<input type="text" style="border-width:0;color:red" id="myres"/>
<br/>
用户密码<input type="password" name="password" id="password"/><br/>
电子邮件<input type="text" name="email" id="email"/><br/>
<input type="submit" value="用户注册"/><br/><br/> 用户名字<input type="text" name="username1" />
<input type="text" style="border-width:0;color:red"/>
<br/>
用户密码<input type="password" name="password"/><br/>
电子邮件<input type="text" name="email"/><br/>
<input type="button" value="用户注册"/> </form>
</body> </html>
registerProcess.php
<?php
//这里两句话很重要,第一句话告诉浏览器返回的数据是xml格式
header("Content-type: text/html; charset=utf-8");
//如果这里写成Content-type: text/html,会报错,得不到数据
//告诉浏览器不要缓存数据
header("Cache-Control:no-cache");
//接收数据(这里要和请求方式对应 _POST 还是 _GET
$username=$_POST['username']; $info="";
if($username=="shunping"){
$info='[{"res":"该用户不可以用","id":"a001","date":"2011-11-11"},{"age":"该用户不可以用","id":"a005","date":"2011-11-11"}]';//注意,这里数据是返回给请求的页面
}else if($username!=""){
$info='[{"res":"该用户可以用","id":"a001","date":"2011-11-11"},{"res":"该用户可以用","id":"a001","date":"2011-11-11"}]';
}
echo $info; ?>
json格式小结
优点:
①作为一种数据传输格式,JSON与XML很相似,但是它更加轻巧。
②json不需要从服务器发送含有特定内容类型的首部信息。
缺点:
①语法过于严谨
②eval函数存在风险
小结
当一个ajax请求到服务器,服务器可以根据需求返回 三种格式的数据,那么我们应当选择哪一个?
1.如果你的项目经理没有特殊要求,建议使用json
2.如果数据需要重用,JSON文件是个不错的选择,其在性能和文件大小方面有优势
3.当远程应用程序未知时,XML文档是首选,因为XML是web服务领域的世界语。
4.若应用程序不需要与其他应用程序共享数据的时候,使用HTML片段来返回数据是最简单的。
xml是最通用的一种数据格式。
ajax技术返回json如何处理的更多相关文章
- Ajax调用返回json,xml数据类型(0517--pm)
一.返回Json型数据: 1.主页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- spring mvc 避免IE执行AJAX时,返回JSON出现下载文件
<!-- 避免IE执行AJAX时,返回JSON出现下载文件 --> <bean id="mappingJacksonHttpMessageConverter" c ...
- SpringMVC 避免IE执行AJAX时,返回JSON出现下载文件
<?xml version="1.0" encoding="UTF-8"?> <!-- SpringMVC配置文件 --> <be ...
- dbda封装类(包括:返回二维数组、Ajax调用返回字符串、Ajax调用返回JSON)
<?php class DBDA { public $host = "localhost"; public $uid = "root"; public $ ...
- Ajax--json(Ajax调用返回json封装代码、格式及注意事项)
Ajax调用json封装代码<dbda.php>: //Ajax调用返回JSON public function JsonQuery($sql,$type=1,$db="mydb ...
- jquery ajax调用返回json格式数据处理
Ajax请求默认的都是异步的 如果想同步 async设置为false就可以(默认是true) var html = $.ajax({ url: "some.php", async: ...
- 在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法
在使用Ajax请求返回json数据的时候IE浏览器弹出下载保存对话框的解决方法 最近在做一个小东西,使用kindeditor上传图片的时候,自己写了一个上传的方法,按照协议规则通过ajax返回json ...
- AJAX请求,返回json进行页面绑值
AJAX请求,返回json进行页面绑值 后台 controller @RequestMapping(value = "backjson.do",method=RequestMeth ...
- ajax访问服务器返回json格式
使用ajax访问服务器返回多条数据,比如返回一个表中的所有数据,页面该如何处理呢?如何获取数据呢?一直不会用ajax返回json格式,今天研究了下,分享给大家~ 首先需要引用服务,点击项目右键,添加引 ...
随机推荐
- ACdream 1216 (ASC训练1) Beautiful People(DP)
题目地址:http://acdream.info/problem? pid=1216 这题一開始用的是线段树.后来发现查询的时候还须要DP处理.挺麻烦..也就不了了之了..后来想到,这题事实上就是一个 ...
- simple_pool对象池——优化<二>
本文章由cartzhang编写.转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/55051570 作者:car ...
- Markdown GUI编辑器推荐 windows mac
windows 1. MarkdownPad 如果右边不能预览: LivePreview is not working - it displays an error message stating T ...
- qb64手记(2)
传值与传引用 PRINT mymax(12, 111) x1 = 55x2 = 66myswapPRINT x1 FUNCTION mymax (x, y)IF x > y THEN my ...
- MongoDB可视化工具 Studio 3T
告别终端使用可视化工具Studio 3T对MongoDB进行数据库的操作. 简单的使用步骤介绍 1.启动MongoDB服务器(方法见MongoDB介绍与安装中的介绍) 2.连接MongoDB服务器 ...
- lua(仿类)
Account = { balance = } function Account:deposit(v) self.balance = self.balance + v end function Acc ...
- 【python】-- try except (异常捕获)、断言
try except (异常捕获) 当程序出错了,但是我们又不想让用户看到这个错误,而且我在写程序的时候已经预料到了它可以出现这样的错误,出现这样的错误代表着什么,我们可以提前捕获这些个错误 1.异常 ...
- 【python】-- 继承式多线程、守护线程
继承式多线程 1.定义 继承式多线程是自己自定义类,去继承theading.Tread这个类,通过类实例.start()启动,去执行run方法中的代码. import threading import ...
- 转。git 乌龟的使用安装
TortoiseGit 简称 tgit, 中文名海龟Git. 海龟Git只支持神器 Windows 系统, 有一个前辈海龟SVN, TortoiseSVN和TortoiseGit都是非常优秀的开源的版 ...
- 在C语言中使用syslog打印日志到日志文件
参见 <unix 环境高级编程>第13 章 精灵进程 Syslog为每个事件赋予几个不同的优先级: LOG_EMERG——紧急情况 LOG_ALERT——应该被立即改正的问题,如系统数据库 ...