程式師世界 >> 編程語言 >> 網頁編程 >> PHP編程 >> 關於PHP編程 >> ThinkPHP中ajax使用實例教程，thinkphpajax

ThinkPHP中ajax使用實例教程，thinkphpajax

編輯：關於PHP編程

ThinkPHP中ajax使用實例教程，thinkphpajax

本文實例講述了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  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應用的理解。

think php 怎做ajax交互有有簡單易懂的例子不勝感激啦

thinkphp自帶有ajax方法，很簡單的使用，方便的交互。舉一個例子你就明白啦。
先包含所需要的js(他的官網裡有下載)，路徑自己修改。
<script src="__PUBLIC__/Js/Base.js" language="javascript" type="text/javascript"></script>
<script src="__PUBLIC__/Js/prototype.js" language="javascript" type="text/javascript"></script>
<script src="__PUBLIC__/Js/mootools.js" language="javascript" type="text/javascript"></script>
<script src="__PUBLIC__/Js/Ajax/ThinkAjax.js" language="javascript" type="text/javascript"></script>

然後例如是一個普通的無刷新驗證用戶名重復不重復的例子：
//先安放一個信息提示的位置：
<div id="result" class="none result" style="font-family:微軟雅黑,Tahoma;letter-spacing:2px"></div>
//然後是輸入框，點擊判斷用戶名是否己存在
<input name="username" type="text" /><span style="float:left; padding-left:5px;"><input type="button" onclick="checkUser();" value="" /></span>

//然後是這個checkUser()的JS
function checkUser(){
ThinkAjax.send('/User/chkUser','ajax=1&username='+$('username').value,'','result');
}
//第一個參數是提交處理的程序頁，第二個是傳遞的參數值，第三個是成功返回後返回的函數(這裡為空)，第四個是值返回到哪個位置(就是之前設置的id="result" )

最後就剩下個程序處理頁 /User/chkUser
class UserAction exte......余下全文>>