JavaScript+Layui表单提交Ajax快捷封装方法使用

落花生 2023-07-26 0 条评论 320 个足迹 JavaScript脚本,杂事小记

首页 / JavaScript脚本,杂事小记 / 正文
星环博客

标题

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的请联系博主,并确保自己网站已经添加博主为友联!

2023年07月26日 17:30:22 © 本文允许各作者规范转载

黑色的背后是黎明... + 赞赏博主吧!已经穷的开不起站了~

下一篇
奇思幻想
表情
签到
赞一下
踩一下
  • PNG静图表情包
  • GIF动图表情包

评论事项 ( 请使用真实邮箱地址,以便接收评论回复信息 )

 这颗星球好像还没有被发现~
这里是B612星球,小王子外出寻找她的绵羊了,留言等她吧...
赞赏作者

支付宝

微信

支付宝红包码

[ 赞赏码 ]

打开对应软件 - 扫码赞赏

赞赏请备注好昵称和邮箱,方便公布排行榜

博客信息

文章数目79 篇
评论数目112 条
运行天数3年246天
友链特数0 条

广而告之

当前文章标签

https://www.xhto.cn/usr/themes/only/x-data/url.php
当前网站已经离线 - 星环博客
星环博客+https://www.xhto.cn/
https://www.xhto.cn/usr/themes/only/x-user/xeq_zfb.jpg
https://www.xhto.cn/usr/themes/only/x-user/xeq_wx.jpg
https://www.xhto.cn/usr/themes/only/x-user/xeq_hbm.jpg

即将离开 星环博客

您即将离开星环博客,请注意您的帐号和财产安全。


继续访问

星环博客 的运行时间:

花有重开日,人无再少年。

站点创建时间:2020-08-17 +  版权归属 星环博客 所有 +  © 2024 Copyright +  备案号: 粤ICP备2020118789号 +  不理白驹过隙,不信生死有命 +  页面加载速度:359ms
https://www.xhto.cn/usr/themes/only/x-img/xloading.gif