标题

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)
})