jquery.form.js的灵活使用--ajaxsubmit的使用

js请求后台数据是常用的技术，form表单提交数据时可以用jquery的插件ajaxSubmit，这个插件很不错，我一直在用，因为后台很多地方都是直接写form表单提交的，但是原生的form表单提交总是给人的体验太差，然后每次手动写ajax又显得太过麻烦，程序就是为了解决麻烦而开发的，所以我找到了ajaxSubmit这个插件，可以轻松实现form表单自动ajax提交，本次演示结合了layer插件。

核心代码如下，options是ajaxSubmit的配置，如果直接把option设置为function函数，则默认是进入option的success。

其他的逻辑封装省略X行：

var options = {
            beforeSubmit:function () {
                layer.msg('数据处理中，请勿关闭...',{time:20000,icon:6})
            },
            success:function(res) {
                res = isJSON(res)? $.parseJSON(res) : res;
                layer.msg(res.msg, {
                    time: res.code == 0 ? 1000 : 2000,
                    icon: res.code == 0 ? 6 : 5
                }, function() {
                    if (url && res.code == 0) {
                        location.href = url
                    }else if(callBackfun){
                        return callBackfun(res);
                    }
                })
            }
        };

        $("#"+id).ajaxSubmit(options)

注意：请先引入layer、jquery、jquery.form.js文件

这是jquey.form.js文件：jquery.form.js

补充，在一个表单中用form提交后用button的submit提交用自带的form验证规则需要先通过js验证后用ajax请求，如下：

<form action="你的后端" method="post" id="check-form" >
    <div class="form-group">
        <label for="title">标题：</label>
        <input type="text" class="form-control" placeholder="请输入标题" id="title" name="title" required maxlength="255">
    </div>

    <div class="form-group">
        <label for="content">内容：</label>
        <textarea class="form-control" rows="6" id="content"  placeholder="请输入计划内容"  name="content" required minlength="10" maxlength="500"></textarea>
    </div>

    <div class="form-group">
        <label for="status">状态：</label><br>
        <div class="btn-group btn-group-toggle" data-toggle="buttons">
            <label class="btn btn-outline-primary active">
                <input type="radio" name="status" value="0" autocomplete="off" checked> 未开始
            </label>
            <label class="btn btn-outline-info ">
                <input type="radio" name="status" value="1" autocomplete="off" > 进行中
            </label>
            <label class="btn btn-outline-success">
                <input type="radio" name="status" value="2" autocomplete="off"> 已完成
            </label>
            <label class="btn btn-outline-danger">
                <input type="radio" name="status" value="-1" autocomplete="off"> 已终止
            </label>
        </div>
    </div>


    <div class="form-group">
        <label for="remark">额外说明：</label>
        <textarea class="form-control" rows="3" placeholder="可添加额外的备注"  id="remark" name="remark" maxlength="255"></textarea>
    </div>

    <div class="text-center">
        <button type="button" onclick="validateAndSubmit()" class="btn btn-primary mr-2">提交</button>
        <a href="index.html" class="btn btn-secondary mr-2">返回</a>

    </div>
</form>
<script>
    function validateAndSubmit() {
        var form = document.getElementById('check-form');
        //先验证表单，然后通过了就form_submit提交，这个是自己封装的ajax提交
        if (form.checkValidity()) {
            form_submit();
        } else {
            form.reportValidity();
        }
    }
</script>