ThinkPHP中ajax使用实例教程

2024-05-04 22:19:06

字体：大中小

来源：转载

供稿：网友

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

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

一、jquery实现方法：

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

<?phpclass 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页面代码如下：

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

上一篇：去掉destoon资讯内容页keywords关键字自带的文章标题的方法

下一篇：destoon实现不同会员组公司名称显示不同的颜色的方法