程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 網頁編程 >> 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......余下全文>>
 

Thinkphp中使用jquery的ajax怎接收返回值?? 如圖:

你那個回調函數裡的 參數寫錯
這樣寫
alert(dd.data);

你沒了解 ajaxReturn返回的數據格式
你可以直接通過 浏覽器訪問 is_user 就可以看到
 

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved