ThinkPHP中ajax使用實(shí)例教程
本文實(shí)例講述了ThinkPHP中使用ajax的方法,提交表單如下圖所示:
點(diǎn)擊提交,不需要刷新本頁,將內(nèi)容提交到數(shù)據(jù)庫當(dāng)中,并在本頁顯示提交的內(nèi)容。如下圖所示:
一、jquery實(shí)現(xiàn)方法:
MessageAction.class.php頁面代碼如下:
<?php class MessageAction extends Action{ function index(){ $this->display(); } function add(){ //ajaxReturn(數(shù)據(jù),'提示信息',狀態(tài)) $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('標(biāo)題為'+json.data.title+'信息為'+json.data.message); }else{ $mess.slideDown(3000,function(){ $mess.css('display','block'); }).html('信息添加失敗,請(qǐng)檢查'); } }); }) }) </script> </head> <body> <div style="display:none; color:red;" id="mess"></div> <form action="" method="get"> 標(biāo)題:<input type="text" name="title" /><br /> 信息:<input type="text" name="message" /><br /> <input type="button" value="提交" /> </form> </body> </html>
二、ThinkPHP實(shí)現(xiàn)方法:
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,回調(diào)函數(shù),信息顯示的地方); ThinkAjax.sendForm('frm','__URL__/addtwo',wc); } function wc(data,status){ if(status!=1){ alert('發(fā)送失敗'); }else{ $('list').innerHTML+='標(biāo)題'+data.title+',信息'+data.message; } } </script> </head> <body> <div id="list"></div> <form action="" method="POST" id="frm"> 標(biāo)題:<input type="text" name="title" /><br /> 信息:<input type="text" name="message" /><br /> <input type="button" value="提交" onClick="add()" /> </form> </body> </html>
感興趣的朋友可以測試運(yùn)行一下本文所示實(shí)例,可以加深對(duì)Ajax應(yīng)用的理解。
更多關(guān)于thinkPHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《ThinkPHP入門教程》、《thinkPHP模板操作技巧總結(jié)》、《ThinkPHP常用方法總結(jié)》、《smarty模板入門基礎(chǔ)教程》及《PHP模板技術(shù)總結(jié)》。
希望本文所述對(duì)大家基于ThinkPHP框架的PHP程序設(shè)計(jì)有所幫助。
- ThinkPHP5.1+Ajax實(shí)現(xiàn)的無刷新分頁功能示例
- ThinkPHP5 通過ajax插入圖片并實(shí)時(shí)顯示(完整代碼)
- Thinkphp5框架ajax接口實(shí)現(xiàn)方法分析
- TP5(thinkPHP5)框架基于ajax與后臺(tái)數(shù)據(jù)交互操作簡單示例
- thinkPHP5框架實(shí)現(xiàn)基于ajax的分頁功能示例
- thinkPHP5 ajax提交表單操作實(shí)例分析
- tp5框架基于Ajax實(shí)現(xiàn)列表無刷新排序功能示例
- ThinkPHP中使用ajax接收json數(shù)據(jù)的方法
- ThinkPHP使用心得分享-ThinkPHP + Ajax 實(shí)現(xiàn)2級(jí)聯(lián)動(dòng)下拉菜單
- tp5框架基于ajax實(shí)現(xiàn)異步刪除圖片的方法示例
相關(guān)文章
Yii實(shí)現(xiàn)MySQL多數(shù)據(jù)庫和讀寫分離實(shí)例分析
這篇文章主要介紹了Yii實(shí)現(xiàn)MySQL多數(shù)據(jù)庫和讀寫分離的方法,以實(shí)例形式詳細(xì)的分析了Yii數(shù)據(jù)庫讀寫分離的方法,是開發(fā)大型項(xiàng)目非常實(shí)用的技巧,需要的朋友可以參考下2014-12-12PHP設(shè)計(jì)模式(四)原型模式Prototype實(shí)例詳解【創(chuàng)建型】
這篇文章主要介紹了PHP設(shè)計(jì)模式:原型模式Prototype,結(jié)合實(shí)例形式詳細(xì)分析了PHP原型模式Prototype的基本概念、功能、原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05PHP中__get()和__set()的用法實(shí)例詳解
在PHP5中,預(yù)定義了兩個(gè)函數(shù)“__get()”和“__set()”來獲取和賦值其屬性,對(duì)每個(gè)字段進(jìn)行set和get的操作。只需要加上兩個(gè)魔術(shù)方法即可2013-06-06Yii2基于Ajax自動(dòng)獲取表單數(shù)據(jù)的方法
這篇文章主要介紹了Yii2基于Ajax自動(dòng)獲取表單數(shù)據(jù)的方法,涉及Yii結(jié)合ajax調(diào)用鼠標(biāo)事件動(dòng)態(tài)查詢表單的相關(guān)技巧,需要的朋友可以參考下2016-08-08php讀取csv實(shí)現(xiàn)csv文件下載功能
用PHP代碼下載CSV文件,可以是字符串,也可以是一個(gè)CSV文件,下面直接上代碼2013-12-12