手册 >> 访问交互 >> Ajax的实现
SpeedPHP框架主要实现的是PHP后端的编程，所以对于前端实现的Ajax等相关技术，并无特殊的要求，也就是说在SpeedPHP中可以使用各种前端技术：Ajax，Flash等等。
Ajax实现，我们比较推荐的是jQuery这个Javascript框架，以下我们来讲述如果在SpeedPHP的应用程序中使用jQuery。
在jQuery + SpeedPHP的组合中，SpeedPHP的作用主要是：
- 接收在jQuery的Ajax提交的数据，并进行处理。
- 返回（显示）处理后的数据和结果给jQuery接收并回调执行。
- 由于jQuery比较推荐使用JSON数据格式，同时JSON格式也是较轻盈的选择，所以SpeedPHP中可以使用json_encode（编码）和json_decode（解码）来接收和发送JSON格式的数据。
以下分别有三个例子可以让大家体会jQuery和SpeedPHP的结合使用：源码下载
例子1. 通过jQuery的Ajax发送数据到SpeedPHP处理并返回结果
表单test.html，jQuery的onclick事件
// 例子一
$('#ex1button').click(function(){ // “计算”按钮被点击
var numval = $('#numval').val(); // numval等于id=numval的输入框的值
// 使用jQuery的$.get来发送数据到myajax/compute中，返回数据。
$.get('<{spUrl c=myajax a=compute}>', 'num='+numval, function(result){
$('#ex1result').html(result); // 返回的数据直接显示在id=ex1result的span中。
});
});
控制器myajax.php，compute动作
function compute(){
// 接收ajax提交的num值
$num = $this->spArgs('num');
// 返回（显示）num的平方
echo $num * $num;
}
步骤：
- 在页面中加载jQuery库<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
- 按钮触发时，使用jQuery的$.get来发送数据
- 控制器/动作 myajax/compute 接收数据，处理（计算平方），并返回（显示）
- jQuery接收到数据并显示结果
例子2. 检查用户名是否重复，使用JSON数据
表单test.html，jQuery的onclick事件
// 例子二
$('#ex2button').click(function(){ // “检查用户名重复”的按钮被点击
// 由于需要JSON数据，所以使用$.getJSON
$.getJSON("<{spUrl c=myajax a=check}>", { 'username': $('#username').val() }, function(json){
// 这里是返回的数据，json变量就是json格式的数据，可以直接使用
alert("JSON 结果: " + json.status); // 使用json.status，对应myajax/check中的$result['status']
$('#ex2result').html(json.message); // 使用json.message，对应myajax/check中的$result['message']
});
});
控制器myajax.php，check动作
function check(){
// 接收提交的username值
$username = $this->spArgs('username');
// 检查用户名重名，通常这里是通过数据库检查，这里只是简单演示，如果username等于admin即已经重名
if( $username == 'admin' ){
$result = array(
'status' => 0, // 失败标志
'message' => '已经存在该用户名', // 提示信息
);
}else{
$result = array(
'status' => 1, // 成功标志
'message' => '用户名可用', // 提示信息
);
}
echo json_encode( $result ); // 返回（显示）JSON结果
}
步骤：
- 在页面中加载jQuery库
- 按钮触发时，使用jQuery的$.getJSON来发送数据，数据类型为JSON
- 控制器/动作 myajax/check 接收数据，处理（计算平方），并返回JSON数据（显示JSON数据）
- jQuery接收到数据，根据数据的结果，分别显示——弹出status，显示message
返回JSON数据需要用到json_encode函数，该函数在PHP默认配置中是存在的，而且如果服务器的PHP没有配置json函数，SpeedPHP也提供了补充json函数，所以在SpeedPHP环境中直接使用json_encode/json_decode函数即可。
例子3. 表单ajax提交，返回HTML数据
表单test.html，jQuery的onclick事件
// 例子三
$("#ex3button").click(function(){ // “提交”按钮被点击
// 构造发送的数据，请注意如果获取表单各项的值
var formdata = {
'fname' : $('#fname').val(),
'fsex' : $('input[@name=fsex]:checked').val(),
'fclass': $('#fclass').val(),
'fphone': $('#fphone').val()
};
// 用$.post发送数据
$.post('<{spUrl c=theform a=mysubmit}>', formdata, function(result){
$('#resulttable').append(result); // 返回的数据直接追加到resulttable表格的后面
});
});
控制器theform.php，mysubmit动作
function mysubmit(){
$data = $this->spArgs(); // $data是提交上来的数据
$data['ctime'] = date('Y-m-d H:i:s'); // 增加当前时间
// 这里经过处理：入库等
$this->data = $data; // 发送到模板
// 返回（显示）结果HTML，该结果由Smarty模板提供
$this -> display('mydata.html');
}
模板mydata.html，和普通模板一样
<tr>
<td><{$data.fname}></td>
<td><{if 0 == $data.fsex}>男<{else}>女<{/if}></td>
<td><{$data.fclass}></td>
<td><{$data.fphone}></td>
<td><{$data.ctime}></td>
</tr>
步骤：
- 在页面中加载jQuery库（通常可以将此代码写到header.html文件中）
- 表单提交时，使用jQuery的$.post来发送表单数据
- 控制器/动作 theform/mysubmit接收表单数据，（写入数据库），然后返回（显示），这里用到了Smarty模板（可以不用，本例只为演示）。
- jQuery接收到数据并进行回调处理。
以上可以看出，其实Ajax（jQuery）在SpeedPHP框架应用程序中的使用，和普通的Ajax没有什么不同，只是Ajax的地址，可以通过spUrl来进行构造，就此而已。
本文源码下载
如果希望在Ajax方面做出更多的特效和加强用户体验，建议大家可以进一步研究jQuery框架，这是非常优良和实用的一门技术。
相关文章
