ThinkPHP中使用ajax
点击提交,不需要刷新本页,将内容提交到数据库当中,并在本页显示提交的内容.
jquery方法:
MessageAction.class.php
- <?php
- class MessageAction extends Action{
-
- function index(){
- $this->display();
- }
-
- function add(){
-
- $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 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
- <?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>
