thinkphp中ajax使用实例(thinkphp内置支持ajax)
一、总结
1、thinkphp应该是内置支持ajax的,所以请求类型里面才会有是否是ajax
// 是否为 Ajax 请求 if (Request::instance()->isAjax()) echo "当前为 Ajax 请求";
// 是否为 Pjax 请求 if (Request::instance()->isPjax()) echo "当前为 Pjax 请求";
二、thinkphp中ajax使用实例
1 一、jquery实现方法: 2 MessageAction.class.php页面代码如下: 3 <?php 4 class MessageAction extends Action{ 5 6 function index(){ 7 $this->display(); 8 } 9 10 function add(){ //1、控制器add方法 11 //ajaxReturn(数据,'提示信息',状态) 12 $m=M('message'); 13 if($m->add($_GET)){ 14 $this->ajaxReturn($_GET,'添加信息成功',1); //2、以ajax方式返回 15 }else{ 16 $this->ajaxReturn(0,'添加信息失败',0); 17 } 18 } 19 20 } 21 ?> 22 23 模板index.html代码如下: 24 <html> 25 <head> 26 <script type="text/javascript" src="__PUBLIC__/js/jquery-1.7.1.min.js"></script> 27 <script type="text/javascript"> 28 $(function(){ 29 $('input:button').click(function(){ //1、表单ajax提交实例 30 var $title=$('input[name="title"]').val(); 31 var $message=$('input[name="message"]').val(); 32 $mess=$('#mess'); 33 $.getJSON('__URL__/add',{title:$title,message:$message},function(json){ //2.提交到控制器中的add方法 3、$.getJSON感觉是封装的ajax的open方法 34 //alert(json);return false; 35 if(json.status==1){ 36 $mess.slideDown(3000,function(){ 37 $mess.css('display','block'); 38 }).html('标题为'+json.data.title+'信息为'+json.data.message); 39 }else{ 40 $mess.slideDown(3000,function(){ 41 $mess.css('display','block'); 42 }).html('信息添加失败,请检查'); 43 } 44 }); 45 }) 46 }) 47 </script> 48 </head> 49 <body> 50 <div style="display:none; color:red;" id="mess"></div> 51 <form action="" method="get"> 52 标题:<input type="text" name="title" /><br /> 53 信息:<input type="text" name="message" /><br /> 54 <input type="button" value="提交" /> 55 </form> 56 </body> 57 </html> 58 59 二、ThinkPHP实现方法: 60 MessageAction.class.php页面代码如下: 61 <?php 62 class MessageAction extends Action{ 63 64 function index(){ 65 $this->display(); 66 } 67 68 function addtwo(){ 69 $m=M('message'); 70 if($vo=$m->create()){ 71 if($m->add()){ 72 $this->ajaxReturn($vo,'添加成功',1); 73 }else{ 74 $this->ajaxReturn(0,'添加失败',0); 75 } 76 }else{ 77 $this->error($m->getError()); 78 } 79 } 80 } 81 ?> 82 83 模板index.html代码如下: 84 <html> 85 <head> 86 <script type="text/javascript" src="__PUBLIC__/Js/Base.js"></script> 87 <script type="text/javascript" src="__PUBLIC__/Js/prototype.js"></script> 88 <script type="text/javascript" src="__PUBLIC__/Js/mootools.js"></script> 89 <script type="text/javascript" src="__PUBLIC__/Js/ThinkAjax.js"></script> 90 <script type="text/javascript"> 91 function add(){ 92 //ThinkAjax.sendForm(表单ID,URL,回调函数,信息显示的地方); 93 ThinkAjax.sendForm('frm','__URL__/addtwo',wc); 94 } 95 function wc(data,status){ 96 if(status!=1){ 97 alert('发送失败'); 98 }else{ 99 $('list').innerHTML+='标题'+data.title+',信息'+data.message; 100 } 101 } 102 </script> 103 104 </head> 105 <body> 106 <div id="list"></div> 107 <form action="" method="POST" id="frm"> 108 标题:<input type="text" name="title" /><br /> 109 信息:<input type="text" name="message" /><br /> 110 <input type="button" value="提交" onClick="add()" /> 111 </form> 112 </body> 113 </html> 114 115 感兴趣的朋友可以测试运行一下本文所示实例,可以加深对Ajax应用的理解。