ThinkPHP官网上的Ajax示例写得非常复杂,还混杂着Jquery的一些代码,让人难以看懂其背后的本质。
其实ThinkPHP实现起来很简单的,核心就是$this->ajaxReturn(data,info,status)这一个后台方法,前台处理好ThinkPHP扔回来的Json,就可以轻松完成一个Ajax操作。
下面用一个极其简单例子来说明这个问题:
前台index.html有两个输入框,javascript获取输入两个的数之后,传递到AjaxAction.class.php中的Ajax1()方法,Thinkphp将两数获取后相加,之后将结果扔回前台。
当然,这个简单的相加明明单纯只用JavaScript就可以实现,这个例子只是为了说明ThinkPHP的Ajax是怎么操作的。
先在Lib\Action文件夹中开一个AjaxAction.class.php,里面的代码很简单,一个跳转到主页的方法index(),一个处理Ajax的方法Ajax1():
<?php
class AjaxAction extends Action{
//跳转到首页
public function index(){
$this->display();
}
//Ajax后台处理
public function ajax1(){
//index.html的var text1与var text2是利用post方法传递过来的,因此直接用post方法获取
$text1=$_POST['text1'];
$text2=$_POST['text2'];
$this->ajaxReturn($text1+$text2,'运算成功!',1);//ThinkPHP的固定格式,此框架,要求固定推回三个参数给前台
}
}
?>
此处,$this->ajaxReturn(data,info,status)这一个后台方法,ThinkPHP是如此要求的:
系统支持任何的AJAX类库,Action类提供了ajaxReturn方法用于AJAX调用后返回数据给客户端。并且支持JSON、XML和EVAL三种方式给客户端接受数据,通过配置DEFAULT_AJAX_RETURN进行设置,默认配置采用JSON格式返回数据,在选择不同的AJAX类库的时候可以使用不同的方式返回数据。要使用ThinkPHP的ajaxReturn方法返回数据的话,需要遵守一定的返回数据的格式规范。
ThinkPHP返回的数据格式包括:data:返回数据,status:操作状态,info:提示信息
实质上,仅仅是ThinkPHP扔回一个包含三个数据的json数组给前台而已,ThinkPHP提供三个位置给你传递你要返回的Ajax参数。
上效果图,在每一次Ajax都会先弹出一个最原始的ThinkPHP的Ajax返回结果,如果输入1与2,那么ThinkPHP所返回的结果如下图所示:
其实就是在$this->ajaxReturn(data,info,status)中写的三个数据。
info是一个utf-8编码不要仅,此json数组,在经历data=eval("("+XMLHttpRequest1.responseText+")");之后,就能data.data,data.info,data.status在JavaScript中正常使用传递回来的数据。
因此在Tpl下建立一个文件夹Action之后,再建立的index.html代码则如下:
<!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>Ajax</title>
</head>
<body>
<input type="text" id="text1" />+<input type="text" id="text2" />
<button οnclick="Ajax1()">=</button><span id="result"></span>
</body>
</html>
<script type="text/javascript">
//原生javascript创建Ajax对象的函数,其实本函数就是一个简单的new语句而已,主要是针对不同浏览器有不同的创建方法。
function createXMLHttpRequest() {
var XMLHttpRequest1;
if (window.XMLHttpRequest) {
XMLHttpRequest1 = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
XMLHttpRequest1 = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
XMLHttpRequest1 = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return XMLHttpRequest1;
}
//Ajax处理函数
function Ajax1(){
//获取两个文本框输入的值
var text1=document.getElementById("text1").value;
var text2=document.getElementById("text2").value;
//创建Ajax对象
var XMLHttpRequest1=createXMLHttpRequest();
//指明相应处理方法,实质ajax1()为后台所对应的ajax1处理函数
var url="__URL__/ajax1";
XMLHttpRequest1.open("POST",url,true);
//这里没法解释,你所有JavaScript的请求头都这样写就对了,不会乱码
XMLHttpRequest1.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//传递var text1与var text2给后台的ajax1()
XMLHttpRequest1.send("text1="+text1+"&text2="+text2);
//对于返回结果怎么处理
XMLHttpRequest1.onreadystatechange=function(){
//这个4代表已经发送完毕之后
if(XMLHttpRequest1.readyState==4){
//200代表正确收到了返回结果,相当于JQuery中的Success
if(XMLHttpRequest1.status==200){
alert(XMLHttpRequest1.responseText);
data=eval("("+XMLHttpRequest1.responseText+")");//将ThinkPHP的传回来的数据处理成JavaScript可处理的Json数组
alert(data.info);
document.getElementById("result").innerHTML=data.data;//将运算结果放到id为result的span节点中
}
else{
//如果不能正常接受结果,你肯定是断网,或者我的服务器关掉了。
alert("网络连接中断!");
}
}
};
}
</script>
以上的代码,使用纯JavaScript的Ajax实现。
具体可以参考《【php】利用原生态的JavaScript Ajax为php进行MVC分层设计,兼容IE6》(点击打开链接),这里不再赘述。