当前位置:首页 > CMS教程 > Thinkphp > 列表

ThinkPHP中使用ajax

发布:smiling 来源: PHP粉丝网  添加日期:2014-04-19 14:41:42 浏览: 评论:0 

点击提交,不需要刷新本页,将内容提交到数据库当中,并在本页显示提交的内容.

jquery方法:

MessageAction.class.php

  1. <?php 
  2. class MessageAction extends Action{ 
  3.     
  4.     function index(){ 
  5.         $this->display();    
  6.     } 
  7.     
  8.     function add(){ 
  9.         //ajaxReturn(数据,'提示信息',状态)    
  10.         $m=M('message'); 
  11.         if($m->add($_GET)){ 
  12.             $this->ajaxReturn($_GET,'添加信息成功',1); 
  13.         }else
  14.             $this->ajaxReturn(0,'添加信息失败',0);    
  15.         } 
  16.     } 
  17.  
  18. ?> 

模板index.html

  1. <html> 
  2. <head> 
  3. <script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.1.min.js"></script> 
  4. <script type="text/javascript"> 
  5.     $(function(){ 
  6.         $('input:button').click(function(){ 
  7.             var $title=$('input[name="title"]').val(); 
  8.             var $message=$('input[name="message"]').val(); 
  9.             $mess=$('#mess'); 
  10.            $.getJSON('__URL__/add',{title:$title,message:$message},function(json){ 
  11.                 //alert(json);return false; 
  12.                 if(json.status==1){ 
  13.                     $mess.slideDown(3000,function(){ 
  14.                         $mess.css('display','block');    
  15.                     }).html('标题为'+json.data.title+'信息为'+json.data.message);    
  16.                 }else{ 
  17.                     $mess.slideDown(3000,function(){ 
  18.                         $mess.css('display','block');    
  19.                     }).html('信息添加失败,请检查');    
  20.                 }        
  21.             }); 
  22.         })    
  23.     }) 
  24. </script> 
  25. </head> 
  26. <body> 
  27. <div style="display:none; color:red;" id="mess"></div> 
  28. <form action="" method="get"> 
  29.   标题:<input type="text" name="title" /><br /> 
  30.   信息:<input type="text" name="message" /><br /> 
  31.        <input type="button" value="提交" /> 
  32. </form> 
  33. </body> 
  34. </html> 

ThinkPHP方法:

MessageAction.class.php

  1. <?php 
  2. class MessageAction extends Action{ 
  3.     
  4.     function index(){ 
  5.         $this->display();    
  6.     } 
  7.  
  8.     function addtwo(){ 
  9.         $m=M('message'); 
  10.         if($vo=$m->create()){ 
  11.             if($m->add()){ 
  12.                 $this->ajaxReturn($vo,'添加成功',1);    
  13.             }else
  14.                 $this->ajaxReturn(0,'添加失败',0);    
  15.             }    
  16.         }else
  17.             $this->error($m->getError());    
  18.         } 
  19.                
  20.     } 
  21.  
  22. ?> 

模板index.html

  1. <html> 
  2. <head> 
  3. <script type="text/javascript" src="__PUBLIC__/Js/Base.js"></script> 
  4. <script type="text/javascript" src="__PUBLIC__/Js/prototype.js"></script> 
  5. <script type="text/javascript" src="__PUBLIC__/Js/mootools.js"></script> 
  6. <script type="text/javascript" src="__PUBLIC__/Js/ThinkAjax.js"></script> 
  7. <script type="text/javascript"> 
  8.     function add(){ 
  9.         //ThinkAjax.sendForm(表单ID,URL,回调函数,信息显示的地方); 
  10.         ThinkAjax.sendForm('frm','__URL__/addtwo',wc);    
  11.     } 
  12.     function wc(data,status){ 
  13.         if(status!=1){ 
  14.             alert('发送失败'); 
  15.         }else{ 
  16.             $('list').innerHTML+='标题'+data.title+',信息'+data.message;    
  17.         }    
  18.     } 
  19. </script> 
  20.  
  21. </head> 
  22. <body> 
  23. <div id="list"></div> 
  24. <form action="" method="POST" id="frm"> 
  25.   标题:<input type="text" name="title" /><br /> 
  26.   信息:<input type="text" name="message" /><br /> 
  27.        <input type="button" value="提交" onClick="add()" /> 
  28. </form> 
  29. </body> 
  30. </html> 

Tags: ThinkPHP ajax

分享到: