编辑“SpeedPHP/Ajax应用”

{{SpeedPHP top}}
[[SpeedPHP]]框架主要实现的是[[PHP]]后端的编程，所以对于前端实现的[[Ajax]]等相关技术，并无特殊的要求，也就是说在SpeedPHP中可以使用各种前端技术：Ajax，[[Flash]]等等。

==Ajax的实现==
Ajax实现，我们比较推荐的是[[jQuery]]这个[[Javascript]]框架，以下我们来讲述如果在SpeedPHP的应用程序中使用jQuery。

以下分别有三个例子可以让大家体会jQuery和SpeedPHP的结合使用:

例子1. 通过jQuery的Ajax发送[[数据]]到SpeedPHP处理并返回结果

表单test.html，jQuery的onclick事件
<pre>// 例子一
$('#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中。
	});
});
</pre>
控制器myajax.php，compute动作
<pre>function compute(){
	// 接收ajax提交的num值
	$num = $this->spArgs('num');
	// 返回（显示）num的平方
	echo $num * $num;
}
</pre>
步骤：
*在页面中加载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事件
<pre>
// 例子二
$('#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']
	}); 
});
</pre>
控制器myajax.php，check动作
<pre>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结果
}
</pre>
步骤：
*在页面中加载jQuery库
*按钮触发时，使用jQuery的$.getJSON来发送数据，数据类型为JSON
*控制器/动作 myajax/check 接收数据，处理（计算平方），并返回JSON数据（显示JSON数据）
*jQuery接收到数据，根据数据的结果，分别显示——弹出status，显示message

==参考来源==
http://speedphp.com/manual.html

{{SpeedPHP}}

[[category:SpeedPHP|A]]