ThinkPHP中ajax使用实例教程

转载 2018年04月16日 11:40:06
一、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应用的理解。

[php] Thinkphp 加载更多

要实现的效果是这样的: 点击显示更多按钮,再往下显示2条数据。。 数据表: articleList模板文件 include file="./Application/Common/Vi...
  • u010081689
  • u010081689
  • 2015-06-30 23:13:19
  • 2354

Thinkphp 中利用js,ajax写的无限下拉加载效果

控制器代码: public function index(){ $news = M('System_voice'); $news2=M('System_voice')->where(a...
  • ougexingfuba
  • ougexingfuba
  • 2017-06-26 11:50:43
  • 972

thinkphp滚屏加载--无刷新动态加载数据技术的应用

我们浏览有些网页的时候,当拉动浏览器的滚动条时到页底时,页面会继续自动加载更多内容供用户浏览。这种技术我暂且称它为滚屏加载技术。我们发现很多网站用到这种技术,必应图片搜索、新浪微博、QQ空间等将该技术...
  • vailook
  • vailook
  • 2016-08-03 18:23:12
  • 690

Thinkphp 3.23 页面上拉加载 基于ajax分页

Thinkphp 3.23 页面上拉加载 基于ajax分页
  • lzl18918615216
  • lzl18918615216
  • 2017-03-31 14:40:27
  • 893

Thinkphp5.0.18最高效的实现自定义类的自动加载方式

今天看了下,tp5的源码。发现自定义类库的加载方式 是有顺序的。分别是按映射方式 psr4 psr0,其中最高效的,顺序最前的当然是映射方式。我贴出源码,大家看下。private static fun...
  • dzyweer
  • dzyweer
  • 2018-04-15 23:02:37
  • 33

ThinkPHP5+Apicoud+vue商城APP实战

ThinkPHP5+Apicoud+vue商城APP实战目录章节1:项目概述课时1apicloud平台介绍。04:38课时2知识体系架构介绍。16:10章节2:apicloud50分钟快速入门教程课时...
  • qq_33561908
  • qq_33561908
  • 2018-04-17 19:44:57
  • 48

ThinkPHP+jquery实现“加载更多”

ThinkPHP+jquery实现“加载更多”在很多web端界面中都会用到点击按钮加载最新几条数据的demo,下例为使用thinkphp+jquery实现实例:第一步 模板文件 ...
  • haoaiqian
  • haoaiqian
  • 2017-03-10 18:59:22
  • 1353

thinkphp+ajax 移动端实现滚动到底部加载数据(无刷新动态加载数据技术的应用)

thinkphp+ajax 移动端实现滚动到底部加载数据(无刷新动态加载数据技术的应用)
  • a898712940
  • a898712940
  • 2017-12-05 17:48:37
  • 126

PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载

PHP+Ajax点击加载更多内容 -这个效果好,速度快,JS代码虽然没看懂但感觉很专业写的,测试通过了,现在是点击显示更多才会加载,稍后改改如何自动加载一、HTML部分 ...
  • zyytaiyame
  • zyytaiyame
  • 2016-12-28 11:54:02
  • 4662

thinkphp5.0+js 手机下拉加载更多

一,模板文件 div class="lists switcher-panel switcher-panel-cur"> ul class="xinhao"> {volist name="apps"...
  • qq_37462176
  • qq_37462176
  • 2017-11-30 18:42:11
  • 443
收藏助手
不良信息举报
您举报文章:ThinkPHP中ajax使用实例教程
举报原因:
原因补充:

(最多只允许输入30个字)