jquery.form.js 让表单提交更优雅

Posted 2021-02-03 PHP飞鸟的博客

jquery.form.js 让表单提交更优雅。可以页面不刷新提交表单，比jQuery的ajax提交要功能强大。
1.引入

<script src="/src/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/src/jquery.form.js"></script>

2.使用

$(function () {
        var E = window.wangEditor;
        var content_editor = new E(‘#content_editor‘);
        content_editor.create();
        var content_val = $("#content").val();
        // 设置内容
        content_editor.txt.html(content_val);

        var answer_editor = new E(‘#answer_editor‘);
        answer_editor.create();
        var answer_val = $("#answer").val();
        // 设置内容
        answer_editor.txt.html(answer_val);

        $("#cancel_btn").on(‘click‘,function () {
            window.location.href = ‘index‘;
        });

        // 只是准备工作，需要表单提交才触发
        $("#edit_form").ajaxForm({
            dataType: "json",
            success : function(res){
                if(res.errno == 0){
                    alert(‘已保存‘);
                    window.location.href = ‘index‘;
                }else{
                    alert(res.errdesc);
                }
                return false;
            }
        });

        // 提交按钮点击
        $("#edit_btn").on("click", function(){
            // 获取并判断各个值是否填写并正确
            var id   = $("#id").val();
            var title =$("#title").val();
            // 获取内容
            var content = content_editor.txt.html();
            var answer = answer_editor.txt.html();
            var question_type_id = $("#question_type_id").val();
            if(!title){
                alert(‘标题不能为空‘);
                return;
            }
            if (!content && !answer) {
                alert(‘内容和答案不能全为空‘);
                return;
            }
            if(!question_type_id){
                alert(‘类型不能为空‘);
                return;
            }

            // 设置新内容
            $(‘#content‘).val(content);
            $(‘#answer‘).val(answer);

            // 表单触发submit事件
            $("#edit_form").submit();
            return false;
        });

});