TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结_thinkphp5input获取不到ajax.post的数据资源-CSDN文库

108 浏览量 2020-10-15 16:38:53 上传评论收藏 48KB PDF 举报

在开发Web应用时，前后端的数据交互是必不可少的，而ThinkPHP5（简称TP5）作为一款强大的PHP框架，提供了方便的方式来实现这一功能。本文将详细介绍如何在TP5框架下利用Ajax技术进行后台数据交互，主要包括两种方法：使用serialize()方法和利用layui的form.on事件。 **方法一：serialize() 方法** serialize() 是jQuery提供的一个方法，它能够将表单中的数据序列化为URL编码的字符串，便于通过Ajax传递给后台。以下是一个实例： ```html <!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 $.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">  <input type="text" name="account" /> <input type="password" name="passwd" /> <input type="button" value="提交" class="but"> </form> <div id="content"> </div> </body> </html> ``` 在后端，我们通常会接收到这些数据，并进行处理。以下是一个简单的PHP示例： ```php public function reg($account, $passwd) { if ($account == '123') { return json("ajax成功！" . $account . "---" . $passwd); } else { return json("你输出的是其他值：" . $account . "---" . $passwd); } } ``` 这里的`{:url('index/index/reg')}`是ThinkPHP5的URL路由功能，用于生成控制器`index`下的`reg`方法的URL。 **方法二：利用layui的form.on事件** layui是一个轻量级的前端组件库，其中的form模块提供了丰富的表单操作方法。我们可以使用`form.on('submit', function(data){...})`来监听表单的提交事件，并通过Ajax进行数据交互。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>管理员登录</title> <script src="layui.js"></script> <style>  </style> </head> <body> <form class="layui-form"> <input type="text" name="account" lay-verify="required" placeholder="账号"> <input type="password" name="passwd" lay-verify="required" placeholder="密码"> <div class="layui-form-item"> <button class="layui-btn" lay-submit lay-filter="login">提交</button> </div> </form> <script> layui.use(['form'], function(){ var form = layui.form; form.on('submit(login)', function(data){ // 提交到方法 action 默认为当前页 $.ajax({ type: "post", url: "{:url('index/index/login')}", data: data.field, success: function (res) { console.log(res); // 处理返回结果 } }); return false; // 阻止表单跳转 }); }); </script> </body> </html> ``` 后端处理方式与方法一相同，只需根据接收到的数据进行相应的业务逻辑处理。这两种方法都能够有效地实现TP5框架下的Ajax与后台数据交互。serialize()方法适用于常规的HTML表单，而layui的form.on事件则适合使用layui构建的表单场景。在实际开发中，开发者可以根据项目需求选择合适的方式进行数据交互。

资源推荐

资源详情

资源评论