Jquery+ThinkPHP一些例子
2011-06-09 15:53 卫佳 阅读(1086) 评论(0) 编辑 收藏 举报<tagLib name='cx,html' />
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html>
<head>
<title>tdweb jQuery与ThinkPHP结合示例</title>
<html:link type="js"
href="../Public/Js/jquery.form.js"/>
<script type="text/javascript">
//由于ThinkPHP不解析JavaScript里的ThinkPHP常量，所以需要先在这里定义。
var URL='__URL__';
$(document).ready(function (){
$("#testAlert").click(function (){
$.ajax({
url: URL+'/returnHello',//提交访问的URL
type: 'GET',//提交的方法China sunglasses
supplier
dataType: 'text',//返回的内容的类型，由于PHP文件是直接echo的，那么这里就是text
timeout: 1000,//超时时间
error: function(){ //如果出错，执行函数
alert('Error loading XML document');
},
success: function(data){
alert(data);//如果成功，弹出数据
}
});
});
$("#testWriteHtml").click(function (){
$.ajax({
url: URL+'/returnHello',
type: 'GET',
dataType: 'text',
timeout: 1000,
error: function(){
alert('Error loading XML document');
},
success: function(data){
$("#testWriteHtmlDiv").html(data).show("slow");//在div里显示数据Wholesale designer
sunglasses
}
});
});
$("#subform").click(function (){
$.ajax({
url: URL+'/returnForm',
type: 'POST',
data: $('input').serialize(),//对页面所有input元素进行序列化
dataType: 'text',
timeout: 1000,
error: function(){
alert('Error loading XML document');
},
success: function(data){
$("#testWriteHtmlDiv").html(data).show("slow");
}
});
});
$("#subform2").click(function (){
var temp=$("#form2").formSerialize();//这里是使用jQuery的Form插件直接对表单内容进行序列化
//其实jQuery的Form插件的功能很强大，甚至都不用再写$.ajax了，有兴趣的同学可以到
//http://malsup.com/jquery/form/这里更深入的学习
$.ajax({
url: URL+'/returnForm2',
type: 'POST',
data: temp,
dataType: 'text',
timeout: 1000,
error: function(){
alert('Error loading XML document');
},
success: function(data){
$("#testWriteHtmlDiv").html(data).show("slow");
}
});
});
});
</script>
</head>
<body>
<table>
<tr>
<td width="500">
<p><input type="button" value="弹出PHP里直接输出的字符串" id="testAlert"/></p>
<p><input type="button" value="显示PHP里输出的字符串" id="testWriteHtml"/></p>
<p><div id="testWriteHtmlDiv"></div></p>
<form id="form" name="form" action="post">
<p>姓名：<input
name="name" type="text"/></p>
<p>年龄：<input
name="age" type="text"/></p>
<p><input type="button" value="表单提交"
id="subform"/></p>
</form>
<form id="form2" name="form2"
action="post">
<p>姓名：<input
name="name2" type="text"/></p>
<p>年龄：
<select name="age2" id="age2">
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
</p>
<p><input type="button" value="多情况表单提交"
id="subform2"/></p>
</form>
</td>
<td valign="top">
<p>
众所周知，ThinkPHP提供了本身自带的ThinkAjax，在之前tdweb也专门为ThinkAjax写过“5分钟学会ThinkAJAX”，
不过没想到的是，好多人认为ThinkPHP只能用ThinkAjax，其实不然，ThinkPHP只是一个PHP框架，他并不约束你使用什么
第三方JS类库，这次我使用jQuery来为大家演示一下如何让jQuery与ThinkPHP结合，完成ajax效果。
</p>
<p>
由于作者本人的JS很是垃圾，所以，这个也就是起一个抛砖引玉的作用，希望广大JS牛人能够继续补充，争取完善这个示例。
</p>
<p>
示例中除了使用jQuery之外，还使用了一个jQuery的插件，详细使用方法请见注释。
</p>
<p>
如果您想获得更深入的交流，请加群49404422
</p>
</td>
</tr>
</table>
</body>
</html>
[/code]
indexAction 源码
[code]
<?php
//关于jQuery与ThinkPHP结合使用的教程
class IndexAction extends Action{
public function index(){
//显示测试页面
$this->display();
}
public function returnHello(){
//返回Hello world
echo "Hello world!!!";
}
public function returnForm(){
//返回表单提交的内容
echo "您输入的姓名是：".$_POST['name']."<br/>年龄是：".$_POST['age'];
}
public function returnForm2(){
//返回多情况表单提交内容
echo "您输入的姓名是：".$_POST['name2']."<br/>年龄是：".$_POST['age2'];
}
}
?>
