form class=layui-form可以绑定vue方法提交表单吗绑定之后走到了get请求方式我设置的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/beeh 著作权归作者所有。请勿转载和采集!