TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
2020-02-13 11:31
751 查看
本文实例讲述了TP5(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" 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>
后端代码
public function verify() { $posts = input("post.password"); return json($posts); }
更多关于thinkPHP相关内容感兴趣的读者可查看本站专题:《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。
希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。
您可能感兴趣的文章:
- TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
- ThinkPHP5.1+Ajax实现的无刷新分页功能示例
- thinkPHP5 ajax提交表单操作实例分析
- ThinkPHP中使用ajax接收json数据的方法
- ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
- ThinkPHP实现ajax仿官网搜索功能实例
- thinkphp中AJAX返回ajaxReturn()方法分析
- thinkphp中ajax与php响应过程详解
- ThinkPHP处理Ajax返回的方法
- thinkPHP+ajax实现统计页面pv浏览量的方法
- thinkphp验证码的实现(form、ajax实现验证)
- thinkPHP5框架实现基于ajax的分页功能示例
相关文章推荐
- TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
- jQuery的ajax()检验用户名;通过jQuery的load()/get()/post()方法实现;使用XMLHTTPRequest对象来进行AJAX的异步数据交互
- 使用ssm框架 通过ajax异步提交数据具体实现方法
- 基于SSM框架的web开发——ajax实现前后台数据交互
- JQuery九种与后台交互数据的方法(ajax)
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
- TP5中ajax与后台数据的交互
- thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
- 基于angular.js发送ajax请求实现前后台数据交互
- tp5(thinkPHP5框架)使用DB实现批量删除功能示例
- 数据来自后台非Ajax加载的联动实现方法
- 使用ASP.NET AJAX异步调用Web Service和页面中的类方法(10):服务器端和客户端数据类型的自动转换:以XML方式序列化数据、小结
- Java中使用json与前台Ajax数据交互的方法
- 在Ajax中使用Flash实现跨域数据读取的实现方法
- ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
- ajax提交数据到后台php接收(实现方法)
- django框架使用orm实现批量更新数据的方法
- ThinkPHP定时ajax获取后台数据,使用javascript动态修改前端页面的表格来显示数据
- ASP.NET利用JQuery中的Aajax实现JSON数据后台交互
- ThinkPHP中使用ajax接收json数据的方法