ThinkPHP中ajax使用实例教程

本文实例讲述了ThinkPHP中使用ajax的方法，提交表单如下图所示：

点击提交，不需要刷新本页，将内容提交到数据库当中，并在本页显示提交的内容。如下图所示：

一、jquery实现方法：
MessageAction.class.php页面代码如下：

<?phpclass MessageAction extends Action{function index（）{$this->display（）;}function add（）{//ajaxReturn（数据,"提示信息",状态）$m=M（"message"）;if（$m->add（$_GET））{$this->ajaxReturn（$_GET,"添加信息成功",1）;}else{$this->ajaxReturn（0,"添加信息失败",0）;}} }?>

模板index.html代码如下：

<html><head><script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.1.min.js"></script><script type="text/javascript">$（function（）{$（"input:button"）.click（function（）{var $title=$（"input[name="title"]"）.val（）;var $message=$（"input[name="message"]"）.val（）;$mess=$（"#mess"）;$.getJSON（"__URL__/add",{title:$title,message:$message},function（json）{//alert（json）;return false;if（json.status==1）{$mess.slideDown（3000,function（）{$mess.css（"display","block"）;}）.html（"标题为"+json.data.title+"信息为"+json.data.message）;}else{$mess.slideDown（3000,function（）{$mess.css（"display","block"）;}）.html（"信息添加失败，请检查"）;}}）;}）}）</script></head><body><div style="display:none; color:red;" id="mess"></div><form action="" method="get"> 标题：<input type="text" name="title" /><br /> 信息：<input type="text" name="message" /><br /><input type="button" value="提交" /></form></body></html>

二、ThinkPHP实现方法：
MessageAction.class.php页面代码如下：

<?phpclass MessageAction extends Action{function index（）{$this->display（）;}function addtwo（）{$m=M（"message"）;if（$vo=$m->create（））{if（$m->add（））{$this->ajaxReturn（$vo,"添加成功",1）;}else{$this->ajaxReturn（0,"添加失败",0）;}}else{$this->error（$m->getError（））;}}}?>

模板index.html代码如下：

<html><head><script type="text/javascript" src="__PUBLIC__/Js/Base.js"></script><script type="text/javascript" src="__PUBLIC__/Js/prototype.js"></script><script type="text/javascript" src="__PUBLIC__/Js/mootools.js"></script><script type="text/javascript" src="__PUBLIC__/Js/ThinkAjax.js"></script><script type="text/javascript">function add（）{//ThinkAjax.sendForm（表单ID,URL,回调函数,信息显示的地方）;ThinkAjax.sendForm（"frm","__URL__/addtwo",wc）;}function wc（data,status）{if（status！=1）{alert（"发送失败"）;}else{$（"list"）.innerHTML+="标题"+data.title+",信息"+data.message;}}</script></head><body><div id="list"></div><form action="" method="POST" id="frm"> 标题：<input type="text" name="title" /><br /> 信息：<input type="text" name="message" /><br /><input type="button" value="提交" onClick="add（）" /></form></body></html>

感兴趣的朋友可以测试运行一下本文所示实例，可以加深对Ajax应用的理解。