怎么在thinkPHP5中使用ajax实现与后台数据交互
这篇文章给大家介绍怎么在thinkPHP5中使用ajax实现与后台数据交互，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
方法一： serialize() 方法通过序列化表单值，创建 URL 编码文本字符串,这个是jquery提供的方法
前端代码
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>ajax交互</title>
<scriptsrc="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script>
$('.but').click(function(){
varformData=$("#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);//获取成功以后输出返回值
}
});
returnfalse;
})
</script>
</head>
<body>
<formid="myform">
<!--这里给表单起个id用于获取表单并序列化-->
<inputtype="text"name="account"/>
<inputtype="password"name="passwd"/>
<inputtype="button"value="提交"class="but">
</form>
<divid="content">
</div>
</body>
</html>后端代码
publicfunctionreg($account,$passwd){
if($account=='123'){
returnjson("ajax成功！".$account."---".$passwd);
}else{
returnjson("你输出的是其他值：".$account."---".$passwd);
}
}方法二： 利用layui的form.on事件监听
前端代码
<!doctypehtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>管理员登录</title>
<metaname="renderer"content="webkit|ie-comp|ie-stand">
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<metaname="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
<metahttp-equiv="Cache-Control"content="no-siteapp"/>
<linkrel="shortcuticon"href="./favicon.ico"rel="externalnofollow"type="image/x-icon"/>
<linkrel="stylesheet"href="./static/css/font.css"rel="externalnofollow">
<linkrel="stylesheet"href="./static/css/weadmin.css"rel="externalnofollow">
<scriptsrc="./lib/layui/layui.js"charset="utf-8"></script>
</head>
<bodyclass="login-bg">
<divclass="login">
<divclass="message">管理登录</div>
<divid="darkbannerwrap"></div>
<formmethod="post"class="layui-form">
<inputname="username"placeholder="用户名"type="text"lay-verify="required"class="layui-input">
<hrclass="hr15">
<inputname="password"lay-verify="required"placeholder="密码"type="password"class="layui-input">
<hrclass="hr15">
<inputclass="loginin"value="登录"lay-submitlay-filter="login"type="submit">
<hrclass="hr20">
</form>
</div>
<scriptsrc="./static/js/jquery-3.3.1.min.js"></script>
<scripttype="text/javascript">
layui.extend({
admin:'{/}./static/js/admin'
});
//layui.use调用模块
layui.use(['form','admin'],function(){
//获得form模块
varform=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)
varpost_data=data.field;
$.post("{:url('verify')}"
,post_data
,function(data){
console.log(data);
}
)
returnfalse;
});
})
;
</script>
<!--底部结束-->
</body>后端代码
publicfunctionverify()
{
$posts=input("post.password");
returnjson($posts);
}关于怎么在thinkPHP5中使用ajax实现与后台数据交互就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
目录
推荐阅读
0 条评论
本站已关闭游客评论，请登录或者注册后再评论吧~