您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
php与ajax-json数组对象,json对象数组
发布时间：2015-04-21 07:43:44编辑：雪饮阅读（）
json数据格式，每一个花括号可作为一个对象，而若是需要多个对像组成对象数组，就需要中括号，如下：
<script type="text/javascript">
var xueyin=[{"blogname":"雪饮个人博客1","createtime":"2014年12月"},{"blogname":"雪饮个人博客2","createtime":"2014年12月2"}];
alert(xueyin[0].blogname);
alert(xueyin[1].blogname);
</script>
对于上面这种对象数组，在ajax与php中的应用如下：
前端请求页面源代码（index2-post.php）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function xmlhttprequestobject(){
//一号线创建ajax对象
var xmlhttprequest='';
if(window.ActiveXObject){
xmlhttprequest=new ActiveXObject("Microsoft.XMLHTTP");
}
else{
xmlhttprequest=new XMLHttpRequest();
}
return xmlhttprequest;
}
//上面的方法创建了xmlhttprequest对象
function getid(id){
return document.getElementById(id)
}
//预置一个全局空对象
var myxmlhttpquestobject="";
function checkname(){
myxmlhttpquestobject=xmlhttprequestobject();
if(myxmlhttpquestobject){
//如果ajax对象创建成功，我们就打开该对象的传输协议准备传输
//声明ajax要传递参数以及要接收参数的文件路径
var url="chuli-post.php";
//二号线，用指定的url以get的方式打开请求，并且开启异步
var data="yhm="+getid("username").value;
myxmlhttpquestobject.open("post",url,true);
//三号线，用回调函数来处理服务器端返回信息
myxmlhttpquestobject.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gb2312");
myxmlhttpquestobject.onreadystatechange=huidiaohanshu
//get方式的请求发送，在send（）方法中直接填入null即可，若是post方式则需要填入具体值
myxmlhttpquestobject.send(data);
}
else{
alert("创建对象失败");
}
}
function huidiaohanshu(){
//ie中状态码是4次，而360这种webkit内核的则是3次
//alert("处理函数被调用:"+myxmlhttpquestobject.readyState);
if(myxmlhttpquestobject.readyState==4){
var mes=myxmlhttpquestobject.responseText;
//alert(mes);//弹出取出的json数据，仅仅只是字符串罢了
var mes_obj=eval("("+mes+")");//将字符串转换为json对象
//alert(typeof mes_obj);//输出给变量的类型，是json对象没有错
//alert(mes_obj.res);//既是对象，那么我们可以直接以对象的方式访问其属性
//alert(mes_obj.blogname);
getid("tishi").innerHTML=mes_obj[0].res;
/*对象数组的遍历for(var i=0;i<mes_obj.length;i++){alert(mes_obj[i].res);}*/
}
}
</script>
</head>
<body>
<h1>表单1</h1>
<form id="bd1">
用户名：<input type="text" id="username" onkeyup="checkname();"><div id="tishi"></div><br/>
密码：<input type="text" id="password"><br/>
<input type="button" value="提交" onclick="checkname();">
</form>
<br/>
<h1>表单2</h1>
<form id="bd2">
用户名：<input type="text" id="username2"><br/>
密码：<input type="text" id="password2">
</form>
</body>
</html>
服务器端处理页面源代码（chuli-post.php）：
<?php
//Content-type: text/xml;内容类型我们设置为要处理xml
header('Content-type: text/html; charset=gb2312');
//告诉浏览器禁用缓存
//header("Cache-Control:no-cache");
//接收数据，此处接收值以url的参数名为准
/*$username=$_POST['yhm'];*/
$username=iconv("UTF-8","gb2312",$_POST["yhm"]);
/*php与ajax之间数据交换若是用post方式将会产生乱码，iconv()方法在后端php文件中对接收的数据进行重新转换编码即可*/
$info="";
if($username=="雪饮个人博客"){
$info='[{"res":"对不起，该用户名已存在001","blogname":"雪饮个人博客"},{"res":"对不起，该用户名已存在002","blogname":"雪饮个人博客"}]';
}
else{
$info='[{"res":"恭喜你，该用户名可以注册001","blogname":"雪饮个人博客"},{"res":"恭喜你，该用户名可以注册002","blogname":"雪饮个人博客"}]';
}
echo $info;
?>
json还有一种高级扩展数据格式：
<script type="text/javascript">
var bianliang={
"zishuxing":[{"blogname":"雪饮个人博客","createtime":"2014年12月"},{"blogname2":"雪饮个人博客2","createtime":"2014年12月"}],
"zishuxing2":[{"blogname3":"雪饮个人博客3","createtime":"2014年12月"},{"blogname4":"雪饮个人博客4","createtime":"2014年12月"}],
"zishuxing3":"雪饮个人博客分享"
};
alert(bianliang.zishuxing[0].blogname);
alert(bianliang.zishuxing2[0].blogname3);
alert(bianliang.zishuxing3);
</script>
高级扩展中可以用花括号里面的对象数组与对象混合与一起重新组成一个更大的对象。
原创：雪饮个人博客:www.gaojiupan.cn
关键字词：数组,对象,个人博客