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('信息添加失敗,請檢查');
}
});
})
})
</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í)例,可以加深對Ajax應(yīng)用的理解。
更多關(guān)于thinkPHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《ThinkPHP入門教程》、《thinkPHP模板操作技巧總結(jié)》、《ThinkPHP常用方法總結(jié)》、《smarty模板入門基礎(chǔ)教程》及《PHP模板技術(shù)總結(jié)》。
希望本文所述對大家基于ThinkPHP框架的PHP程序設(shè)計(jì)有所幫助。
- ThinkPHP5.1+Ajax實(shí)現(xiàn)的無刷新分頁功能示例
- ThinkPHP5 通過ajax插入圖片并實(shí)時(shí)顯示(完整代碼)
- Thinkphp5框架ajax接口實(shí)現(xiàn)方法分析
- TP5(thinkPHP5)框架基于ajax與后臺數(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級聯(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-12
PHP設(shè)計(jì)模式(四)原型模式Prototype實(shí)例詳解【創(chuàng)建型】
這篇文章主要介紹了PHP設(shè)計(jì)模式:原型模式Prototype,結(jié)合實(shí)例形式詳細(xì)分析了PHP原型模式Prototype的基本概念、功能、原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
PHP中__get()和__set()的用法實(shí)例詳解
在PHP5中,預(yù)定義了兩個(gè)函數(shù)“__get()”和“__set()”來獲取和賦值其屬性,對每個(gè)字段進(jìn)行set和get的操作。只需要加上兩個(gè)魔術(shù)方法即可2013-06-06
Yii2基于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-08
php讀取csv實(shí)現(xiàn)csv文件下載功能
用PHP代碼下載CSV文件,可以是字符串,也可以是一個(gè)CSV文件,下面直接上代碼2013-12-12

