TP5(thinkPHP5)框架使用ajax实现与后台数据交互的方法小结
程序员文章站
2022-06-14 13:44:00
本文实例讲述了tp5(thinkphp5)框架使用ajax实现与后台数据交互的方法。分享给大家供大家参考，具体如下：方法一： serialize() 方法通过序列化表单值，创建 url 编码文本字符串...
本文实例讲述了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);
}
上一篇： 详解vue组件基础