当前位置：首页 > 资讯 > 技术文档

ThinkPHP中ajax使用实例教程

时间：2021-04-09 01:18 编辑：来源：阅读：
扫一扫，手机访问

摘要：ThinkPHP中ajax使用实例教程

本文实例讲述了ThinkPHP中使用ajax的方法，提交表单如下图所示： [img]http://files.jb51.net/file_images/article/201408/2014822151005169.png?2014722151054[/img] 点击提交，不需要刷新本页，将内容提交到数据库当中，并在本页显示提交的内容。如下图所示： [img]http://files.jb51.net/file_images/article/201408/2014822151017567.png?2014722151042[/img] [b]一、jquery实现方法：[/b] 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>

[b]二、ThinkPHP实现方法：[/b] 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应用的理解。更多关于thinkPHP相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/39.htm]ThinkPHP入门教程[/url]》、《[url=http://www.1sucai.cn/Special/853.htm]thinkPHP模板操作技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/129.htm]ThinkPHP常用方法总结[/url]》、《[url=http://www.1sucai.cn/Special/26.htm]smarty模板入门基础教程[/url]》及《[url=http://www.1sucai.cn/Special/350.htm]PHP模板技术总结[/url]》。希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

全部评论(0)

上一篇：php 购物车的例子
下一篇：PHP实现采集程序原理和简单示例代码

资讯排行榜
更多>>