当前位置:   article > 正文

ThinkPHP中ajax使用实例教程_thinkphp使用ajax异步登录

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


声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/148295
推荐阅读
相关标签
  

闽ICP备14008679号