欢迎来到资源库(www.zyku.net)

ThinkPHP

当前位置:首页 > 网络编程 > ThinkPHP > ThinkPHP

ThinkPHP中ajax使用实例教程

时间:2017-02-18|栏目:ThinkPHP|点击:|我要投稿

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

ThinkPHP中ajax使用实例教程

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

ThinkPHP中ajax使用实例教程

一、jquery实现方法:

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

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

<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>

感兴趣的朋友可以测试运行一下本文所示实例,可以加深对Ajax应用的理解。

(资源库 www.zyku.net)

上一篇:Thinkphp模板中截取字符串函数简介

栏    目:ThinkPHP

下一篇:ThinkPHP之N方法实例详解

本文标题:ThinkPHP中ajax使用实例教程

本文地址:https://www.zyku.net/thinkphp/581.html

关于我们 | 版权申明 | 寻求合作 |

重要申明:本站所有的文章、图片、评论等内容,均由网友发表或上传并维护或收集自网络,仅供个人学习交流使用,版权归原作者所有。

如有侵犯您的版权,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:95148658 | 邮箱:mb8#qq.com(#换成@)

苏ICP备2020066115号-1

本网站由提供CDN加速/云存储服务