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

thinkphp怎么用ajax?ThinkPHP中ajax使用实例教程

发布:smiling 来源: PHP粉丝网  添加日期:2018-07-20 14:19:47 浏览: 评论:0 

一、jquery实现方法,代码如下,MessageAction.class.php页面代码如下:

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

模板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.<a href="http://www.111cn.net/cssdiv/css.html" class="anchor" target="_blank">css</a>('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.  function index(){ 
  4.   $this->display();  
  5.  } 
  6.  function addtwo(){ 
  7.   $m=M('message'); 
  8.   if($vo=$m->create()){ 
  9.    if($m->add()){ 
  10.     $this->ajaxReturn($vo,'添加成功',1);  
  11.    }else
  12.     $this->ajaxReturn(0,'添加失败',0);  
  13.    }  
  14.   }else
  15.    $this->error($m->getError());  
  16.   } 
  17.  } 
  18. ?> 

模板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.   } //phpfensi.com 
  18.  } 
  19. </script> 
  20. </head> 
  21. <body> 
  22. <div id="list"></div> 
  23. <form action="" method="POST" id="frm"
  24.  标题:<input type="text" name="title" /><br /> 
  25.  信息:<input type="text" name="message" /><br /> 
  26.   <input type="button" value="提交" onClick="add()" /> 
  27. </form> 
  28. </body> 
  29. </html> 
感兴趣的朋友可以测试运行一下本文所示实例,可以加深对Ajax应用的理解。

Tags: thinkphp ajax

分享到: