ThinkPHP中ajax使用实例教程

这篇文章主要介绍了ThinkPHP中ajax使用, 是ThinkPHP开发中非常实用的技巧,需要的朋友可以参考下

本文实例讲述了ThinkPHP中使用ajax的方法，提交表单如下图所示：

点击提交，不需要刷新本页，将内容提交到数据库当中，并在本页显示提交的内容。如下图所示：

一、jquery实现方法：

MessageAction.class.php页面代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<?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代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

< 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 style="display:none;color:red;" 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页面代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<?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代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

< 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应用的理解。