<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'];
}
}
?>