ThinkPHP中ajax使用實例教程

更新時間：2014年08月22日 15:16:51 投稿：shichen2014

這篇文章主要介紹了ThinkPHP中ajax使用, 是ThinkPHP開發(fā)中非常實用的技巧,需要的朋友可以參考下

本文實例講述了ThinkPHP中使用ajax的方法，提交表單如下圖所示：

點擊提交，不需要刷新本頁，將內(nèi)容提交到數(shù)據(jù)庫當(dāng)中，并在本頁顯示提交的內(nèi)容。如下圖所示：

一、jquery實現(xiàn)方法：

MessageAction.class.php頁面代碼如下：

<?php
class MessageAction extends Action{
 
 function index(){
  $this->display(); 
 }
 
 function add(){
  //ajaxReturn(數(shù)據(jù),'提示信息',狀態(tài)) 
  $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('標(biāo)題為'+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">
 標(biāo)題：<input type="text" name="title" /><br />
 信息：<input type="text" name="message" /><br />
  <input type="button" value="提交" />
</form>
</body>
</html>

二、ThinkPHP實現(xiàn)方法：

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,回調(diào)函數(shù),信息顯示的地方);
  ThinkAjax.sendForm('frm','__URL__/addtwo',wc); 
 }
 function wc(data,status){
  if(status!=1){
   alert('發(fā)送失敗');
  }else{
   $('list').innerHTML+='標(biāo)題'+data.title+',信息'+data.message; 
  } 
 }
</script>

</head>
<body>
<div id="list"></div>
<form action="" method="POST" id="frm">
 標(biāo)題：<input type="text" name="title" /><br />
 信息：<input type="text" name="message" /><br />
  <input type="button" value="提交" onClick="add()" />
</form>
</body>
</html>

感興趣的朋友可以測試運(yùn)行一下本文所示實例，可以加深對Ajax應(yīng)用的理解。

更多關(guān)于thinkPHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《ThinkPHP入門教程》、《thinkPHP模板操作技巧總結(jié)》、《ThinkPHP常用方法總結(jié)》、《smarty模板入門基礎(chǔ)教程》及《PHP模板技術(shù)總結(jié)》。

希望本文所述對大家基于ThinkPHP框架的PHP程序設(shè)計有所幫助。

您可能感興趣的文章: