本文實例講述了TP5(thinkPHP5)框架使用ajax實現與后臺數據交互的方法。分享給大家供大家參考，具體如下：
方法一： serialize() 方法通過序列化表單值，創建 URL 編碼文本字符串,這個是jquery提供的方法
前端代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!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> |
后端代碼
|
1
2
3
4
5
6
7
|
public function reg($account,$passwd){ if($account == '123'){ return json("ajax成功！".$account."---".$passwd); }else{ return json("你輸出的是其他值：".$account."---".$passwd); }} |
方法二： 利用layui的form.on事件監聽
前端代碼
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
|
<!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調用模塊 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> |
后端代碼
|
1
2
3
4
5
|
public function verify() { $posts = input("post.password"); return json($posts); } |
希望本文所述對大家基于ThinkPHP框架的PHP程序設計有所幫助。
原文鏈接：https://blog.csdn.net/coco1118/article/details/83926730
