本文实例讲述了tp5(thinkphp5)框架使用ajax实现与后台数据交互的方法。分享给大家供大家参考，具体如下：
方法一： rialize() 方法通过序列化表单值，创建 url 编码文本字符串,这个是jquery提供的方法
前端代码
<!doctype html><html> <head> <meta chart="utf-8"> <title>ajax交互</title> <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script&genvironmentt; <script> $('.but').click(function () { var formdata = $("#myform").rialize();//formdata值：account=sdf&passwd=sdf //rialize() 方法通过序列化表单值，创建 url 编码文本字符串,这个是jquery提供的方法 $.ajax({ type: "post", url: "{:url('index/index/reg')}", //数据传输的控制器方法 data: formdata,//这里data传递过去的是序列化以后的字符串 success: function (data) { console.log(data); $("#content").append(data);//获取成功以后输出返回值 } }); return fal; })</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); }el{ return json("你输出的是其他值：".$account."---".$passwd); }}方法二： 利用layui的form.on事件监听
前端代码
<!doctype html><html lang="en"><head> <meta chart="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, ur-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" r点钞机工作原理el="external nofollow" > <link rel="styleshe梯形面积公式et" h移动3g手机选什么好ref="./static/css/weadmin.css" rel="external nofollow" > <script src="./lib/layui/layui.js" chart="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="urname" 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 c李煜词传lass="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.u调用模块 layui.u(['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写法：$(lector).post(url,data,function(data,status,xhr),datatype) var post_data = data.field; $.post("{:url('verify')}" , post_data , function (data) { console.log(data); } ) return fal; }); }) ;</script><!-- 底部结束 --></body>后端代码
public function verify() { $posts = input("post.password"); return json($posts); }
本文发布于:2023-04-08 14:34:33，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/0d0ea03cff186b5e0ba9586d01744a0b.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结.doc
本文 PDF 下载地址：TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结.pdf
| 留言与评论（共有 0 条评论） |
