当我们使用layui时,可以通过form表单的方式来实现post请求页面跳转。接下来将介绍layui使用form表单实现post请求页面跳转的方法的攻略。
步骤一:在页面中引入layui模块,引入form模块
<!-- 引入layui -->
<script src="path/layui/layui.js"></script>
<!-- 引入layui所需样式 -->
<link rel="stylesheet" href="path/layui/css/layui.css" />
layui.use('form', function(){
var form = layui.form;
// 表单操作写在这里
});
步骤二:编写form表单
<form action="/example" method="post" class="layui-form">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
</div>
</div>
</form>
其中,form元素必须添加 class="layui-form" 属性,button元素必须添加 lay-submit="" 和 lay-filter="demo1" 属性(demo1为自定义的layui表单事件名)。
步骤三:编写表单提交事件处理函数
form.on('submit(demo1)', function(data){
console.log(data.field) // {username: 'zhangsan', password: '123456'}
// 表单提交处理
// 防止表单提交后页面跳转
return false;
});
其中,data.field 为表单提交的参数,可以在这里进行表单提交的处理。最后返回 false 防止表单提交后页面跳转。
下面演示两条示例:
示例一:使用 Ajax 提交表单并获取后台返回的数据
form.on('submit(demo1)', function(data){
$.ajax({
type: 'POST',
url: '/example',
data: data.field,
dataType: 'json',
success: function(res) {
if(res.code == 0) {
layer.msg('登录成功');
} else {
layer.msg(res.message);
}
},
error: function() {
layer.msg('系统错误');
}
});
return false;
});
使用jQuery库中的 $.ajax 方法提交表单,并获取后台返回的数据,根据返回结果进行对应的提示。
示例二:使用 window.location.href 实现页面跳转
form.on('submit(demo1)', function(data){
window.location.href = '/example';
return false;
});
使用 window.location.href 实现页面的跳转。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益,请联系我们,我们会在确认后第一时间进行删除!