TP5(thinkPHP5)框架使用ajax實(shí)現(xiàn)與后臺(tái)數(shù)據(jù)交互的方法小結(jié)
更新時(shí)間：2020年02月10日 10:03:52 作者：Karagrade
這篇文章主要介紹了TP5(thinkPHP5)框架使用ajax實(shí)現(xiàn)與后臺(tái)數(shù)據(jù)交互的方法,結(jié)合實(shí)例形式總結(jié)分析了thinkPHP5使用ajax與后臺(tái)數(shù)據(jù)交互的兩種實(shí)現(xiàn)方法及相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了TP5(thinkPHP5)框架使用ajax實(shí)現(xiàn)與后臺(tái)數(shù)據(jù)交互的方法。分享給大家供大家參考，具體如下：
方法一： serialize() 方法通過(guò)序列化表單值，創(chuàng)建 URL 編碼文本字符串,這個(gè)是jquery提供的方法
前端代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax交互</title>
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
$('.but').click(function () {
var formData = $("#myform").serialize();//formData值：account=sdf&passwd=sdf
//serialize() 方法通過(guò)序列化表單值，創(chuàng)建 URL 編碼文本字符串,這個(gè)是jquery提供的方法
$.ajax({
type: "post",
url: "{:url('index/index/reg')}", //數(shù)據(jù)傳輸?shù)目刂破鞣椒?
data: formData,//這里data傳遞過(guò)去的是序列化以后的字符串
success: function (data) {
console.log(data);
$("#content").append(data);//獲取成功以后輸出返回值
}
});
return false;
})
</script>
</head>
<body>
<form id="myform">
<!--這里給表單起個(gè)id用于獲取表單并序列化-->
<input type="text" name="account" />
<input type="password" name="passwd" />
<input type="button" value="提交" class="but">
</form>
<div id="content">
</div>
</body>
</html>
后端代碼
public function reg($account,$passwd){
if($account == '123'){
return json("ajax成功！".$account."---".$passwd);
}else{
return json("你輸出的是其他值：".$account."---".$passwd);
}
}
方法二： 利用layui的form.on事件監(jiān)聽(tīng)
前端代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>管理員登錄</title>
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="shortcut icon" href="./favicon.ico" rel="external nofollow" type="image/x-icon"/>
<link rel="stylesheet" href="./static/css/font.css" rel="external nofollow" >
<link rel="stylesheet" href="./static/css/weadmin.css" rel="external nofollow" >
<script src="./lib/layui/layui.js" charset="utf-8"></script>
</head>
<body class="login-bg">
<div class="login">
<div class="message">管理登錄</div>
<div id="darkbannerwrap"></div>
<form method="post" class="layui-form">
<input name="username" placeholder="用戶名" type="text" lay-verify="required" class="layui-input">
<hr class="hr15">
<input name="password" lay-verify="required" placeholder="密碼" type="password" class="layui-input">
<hr class="hr15">
<input class="loginin" value="登錄" lay-submit lay-filter="login" style="width:100%;" type="submit">
<hr class="hr20">
</form>
</div>
<script src="./static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
layui.extend({
admin: '{/}./static/js/admin'
});
//layui.use調(diào)用模塊
layui.use(['form', 'admin'], function () {
//獲得form模塊
var form = layui.form
, admin = layui.admin;
//監(jiān)聽(tīng)提交
//事件監(jiān)聽(tīng)
//語(yǔ)法：form.on('event(過(guò)濾器值)', callback);（過(guò)濾器值指lay-filter="過(guò)濾器值"）
//function(data)里的data是一個(gè)object，data.field是表單填寫(xiě)的內(nèi)容
form.on('submit(login)', function (data) {
//$.post寫(xiě)法：$(selector).post(URL,data,function(data,status,xhr),dataType)
var post_data = data.field;
$.post("{:url('verify')}"
, post_data
, function (data) {
console.log(data);
}
)
return false;
});
})
;
</script>
<!-- 底部結(jié)束 -->
</body>
后端代碼
public function verify()
{
$posts = input("post.password");
return json($posts);
}
更多關(guān)于thinkPHP相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《ThinkPHP入門(mén)教程》、《thinkPHP模板操作技巧總結(jié)》、《ThinkPHP常用方法總結(jié)》、《codeigniter入門(mén)教程》、《CI(CodeIgniter)框架進(jìn)階教程》、《Zend FrameWork框架入門(mén)教程》及《PHP模板技術(shù)總結(jié)》。
希望本文所述對(duì)大家基于ThinkPHP框架的PHP程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- thinkphp5 + ajax 使用formdata提交數(shù)據(jù)（包括文件上傳） 后臺(tái)返回json完整實(shí)例
- ThinkPHP5.1+Ajax實(shí)現(xiàn)的無(wú)刷新分頁(yè)功能示例
- ThinkPHP5 通過(guò)ajax插入圖片并實(shí)時(shí)顯示(完整代碼)
- Thinkphp5框架ajax接口實(shí)現(xiàn)方法分析
- thinkPHP+mysql+ajax實(shí)現(xiàn)的仿百度一下即時(shí)搜索效果詳解
- ThinkPHP框架結(jié)合Ajax實(shí)現(xiàn)用戶名校驗(yàn)功能示例
- thinkPHP利用ajax異步上傳圖片并顯示、刪除的示例
- TP5(thinkPHP5)框架基于ajax與后臺(tái)數(shù)據(jù)交互操作簡(jiǎn)單示例
- ThinkPHP 5 AJAX跨域請(qǐng)求頭設(shè)置實(shí)現(xiàn)過(guò)程解析
相關(guān)文章
php筆記之：有規(guī)律大文件的讀取與寫(xiě)入的分析
本篇文章介紹了，php有規(guī)律大文件的讀取與寫(xiě)入的分析。需要的朋友參考下2013-04-04
php opendir()列出目錄下所有文件的實(shí)例代碼
這篇文章主要介紹了php opendir()列出目錄下所有文件的實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
大家在寫(xiě)php代碼的時(shí)候，前面總是加上@符號(hào)，大家知道什么意思嗎？下面小編給大家分享下@符號(hào)的作用,需要的朋友可以參考下2015-07-07
記Laravel調(diào)用Gin接口調(diào)用formData上傳文件的實(shí)現(xiàn)方法
這篇文章主要介紹了記Laravel調(diào)用Gin接口調(diào)用formData上傳文件的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
PHP實(shí)現(xiàn)微信公眾平臺(tái)音樂(lè)點(diǎn)播
首先說(shuō)一下思路，微信提供了接口，只要數(shù)據(jù)格式滿足它所給的接口的XML格式即可以發(fā)送給關(guān)注者對(duì)應(yīng)的音樂(lè)2014-03-03
Yii1.1中通過(guò)Sql查詢進(jìn)行的分頁(yè)操作方法
這篇文章主要介紹了Yii1.1中通過(guò)Sql查詢進(jìn)行的分頁(yè)操作方法,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-03-03
本篇文章主要介紹了PHP處理密碼的幾種方式，詳細(xì)的介紹了對(duì)密碼的加密處理問(wèn)題，有需要的可以了解一下。2016-11-11
這篇文章主要介紹了ThinkPHP的getField方法,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了Yii支持多域名cors原理的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
typecho插件編寫(xiě)教程（二）:寫(xiě)一個(gè)新插件
這篇文章主要介紹了typecho插件編寫(xiě)教程（二）:寫(xiě)一個(gè)新插件,本文是系列文章的第二篇,需要的朋友可以參考下2015-05-05