本文实例讲述了ThinkPHP中使用ajax的方法，提交表单如下图所示：
点击提交，不需要刷新本页，将内容提交到数据库当中，并在本页显示提交的内容。如下图所示：
一、jquery实现方法：
MessageAction.class.php页面代码如下：
<?php
class 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页面代码如下：
<?php
class 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应用的理解。
更多关于thinkPHP相关内容感兴趣的读者可查看本站专题：《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《smarty模板入门基础教程》及《PHP模板技术总结》。
希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。
