标题
JavaScript+Layui表单提交Ajax快捷封装方法使用
前端代码
<!-- action:提交地址 || form.form_method:定位form表单 || button.form_submit:提交事件触发绑定 -->
<form method="POST" action="/invitation/generate/login" class="form_method">
<div class="c-pop" style="display:flex;">
<div>
<input type="password" name="password" placeholder="请输入密码" class="layui-input" />
<button type="button" id="btn2" class="layui-btn layui-btn-fluid form_submit">确定</button>
</div>
</div>
</form>
// 防止误触提交
$(document).on('keydown', '.form_method input', function(event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
})
// 提交表单
$(document).on('click', '.form_submit', function(){
// 获取表单&对应表单数据
let $form_this = $(this).parents('.form_method'),
$form_action = $form_this.attr('action'),
$form_data = new FormData($form_this[0]);
// 对表单数据进行加密
let $formget_password = $form_data.get('password');
if ($formget_password) {
let $encrypted_password = btoa($formget_password);
// 更新数据
$form_data.set('password', $encrypted_password);
}
// 提交优化
let load_index = layer.msg("数据提交处理中...", {icon: 16});
// 提交事件
setTimeout(function(){
$.ajax({
type: "POST",
dataType: "json",
url: $form_action,
data: $form_data,
processData: false,
contentType: false,
success: function (result) {
layer.close(load_index);
if (result.code === 200) {
layer.msg(result.msg, {icon: 1}, function () {
window.location.href = '';
})
}else{
layer.msg(result.msg, {icon: 7});
}
},
async: false,
error : function() {
layer.close(load_index);
layer.msg('请求错误,请稍后重试!', {icon: 7});
},
complete: function(){
layer.close(load_index);
}
})
},200)
})
版权声明:本文为原创文章,版权归 星环博客 所有,转载请注明出处!
本文链接: https://www.xhto.cn/archives/283.html
友情提示:添加友联和友联失效404的请联系博主,并确保自己网站已经添加博主为友联!
黑色的背后是黎明... + 赞赏博主吧!已经穷的开不起站了~
兄弟写的非常好 https://www.cscnn.com/
不错不错,我喜欢看 www.jiwenlaw.com
想想你的文章写的特别好https://www.ea55.com/
叼茂SEO.bfbikes.com
博主真是太厉害了!!!