本文实例讲述了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程序设计有所帮助。