溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家介紹怎么在thinkPHP5中使用ajax實現與后臺數據交互，內容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。
方法一： serialize() 方法通過序列化表單值，創建 URL 編碼文本字符串,這個是jquery提供的方法
前端代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ajax交互</title> <script src="//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() 方法通過序列化表單值，創建 URL 編碼文本字符串,這個是jquery提供的方法 $.ajax({ type: "post", url: "{:url('index/index/reg')}", //數據傳輸的控制器方法 data: formData,//這里data傳遞過去的是序列化以后的字符串 success: function (data) { console.log(data); $("#content").append(data);//獲取成功以后輸出返回值 } }); return false; }) </script> </head> <body> <form id="myform"> <!--這里給表單起個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事件監聽
前端代碼
<!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" 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調用模塊
layui.use(['form', 'admin'], function () {
//獲得form模塊
var form = layui.form
, admin = layui.admin;
//監聽提交
//事件監聽
//語法：form.on('event(過濾器值)', callback);（過濾器值指lay-filter="過濾器值"）
//function(data)里的data是一個object，data.field是表單填寫的內容
form.on('submit(login)', function (data) {
//$.post寫法：$(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>
<!-- 底部結束 -->
</body>后端代碼
public function verify()
{
$posts = input("post.password");
return json($posts);
}關于怎么在thinkPHP5中使用ajax實現與后臺數據交互就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
