layui form 绑定vue方法提交表单并设置POST请求
可以绑定vue方法提交表单,但是需要注意以下几点:
- 在form标签上添加lay-filter属性,用于绑定form表单的事件。
- 在提交按钮上添加lay-submit属性,用于触发form表单的提交事件。
- 在form表单的事件中,通过ajax方式提交表单数据,同时需要设置请求方式为post。
示例代码:
HTML部分:
<form class='layui-form' lay-filter='formDemo'>
<div class='layui-form-item'>
<label class='layui-form-label'>用户名</label>
<div class='layui-input-block'>
<input type='text' name='username' required 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' required 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>
JS部分:
//引入layui模块
layui.use(['form', 'jquery'], function(){
var form = layui.form;
var $ = layui.jquery;
//监听提交事件
form.on('submit(demo1)', function(data){
//阻止表单跳转
event.preventDefault();
//ajax方式提交表单数据
$.ajax({
url: '/submit-form',
type: 'POST',
data: data.field,
success: function(res){
//提交成功后的操作
},
error: function(err){
//提交失败后的操作
}
});
return false;
});
});
需要注意的是,如果走到了get请求方式,可能是因为在form表单的事件中设置了错误的请求方式。建议检查代码中是否有设置请求方式的代码,如有,请确认设置的请求方式是否为post。
原文地址: https://www.cveoy.top/t/topic/mE3O 著作权归作者所有。请勿转载和采集!