<div id="ajaxForm" style="z-index:999;display:none;"></div>
<script type="text/javascript">
    $(function () {
        var t = new Vue({
            el:'#ajaxForm',
            methods: {
                ajaxSuccess: function(message,redirect) {
                    this.$notify({
                        title: '成功',
                        message: message,
                        type: 'success',
                        duration: 1500,
                        onClose: function(){
                            if( ! redirect ){
                                var tip = tips_layer.pop();
                                refresh();
                                layer.close(tip);
                                layer.closeAll();
                            }else{
                                parent.location.href = redirect;
                            }
                        }
                    });
                },
                ajaxError: function (message) {
                    this.$notify.error({
                        title: '失败',
                        message: message,
                        duration: 2500
                    });
                },
                ajaxWaring: function () {
                    this.$notify({
                        title: '警告',
                        message: '请求失败',
                        type: 'warning',
                        duration: 3500
                    });
                },
                ajaxInfo: function () {
                    this.$notify.info({
                        title: '提示',
                        message: '请编辑后再保存！！！',
                        duration: 2000
                    });
                },
                ajaxValidatorFail: function (message, th) {
                    this.$notify({
                        title: '提示',
                        message: message,
                        type: 'info',
                        duration: 2500,
                        onClose: function(){
                            $($(th).find('button')[0]).prop('disabled',false);
                            $($(th).find('button')[0]).css('cursor','pointer');
                        }
                    });
                }
            }
        });
        $('form').submit(function (event) {
            if( window.form && !window.form.valid() ){
                return false;
            }
            // 验证数据是否修改
            if( window.formDatum && window.formDatum == $('form').serialize() ){
                //> 提示信息
                t.ajaxInfo();
                return false;
            }
            var evt = event || window.event;
            var th = $(evt.target);
            // 前端防止重复提交数据
            $($(th).find('button')[0]).prop('disabled',true);
            $($(th).find('button')[0]).css('cursor','not-allowed');
            $.ajax({
                url: th.prop('action'),
                type: th.prop('method'),
                data: th.serialize(),
                dataType: 'json',
                success: function (res) {
                    if( res.status == 'success' ){
                        t.ajaxSuccess(res.message,res.redirect);
                    }else{
                        // 处理回调错误信息
                        if( res.error ){
                            // 数据验证失败提醒
                            t.ajaxValidatorFail(res.message,th);
                            return false;
                        }else{
                            // 数据保存失败
                            t.ajaxError(res.message);
                            // 失败取消提交按钮
                            $($(th).find('button')[0]).prop('disabled',false);
                            $($(th).find('button')[0]).css('cursor','pointer');
                        }
                    }
                },
                error: function () {
                    // 失败取消提交按钮
                    $($(th).find('button')[0]).prop('disabled',false);
                    $($(th).find('button')[0]).css('cursor','pointer');
                    t.ajaxWaring();
                }
            });
            return false;
        });
    });
</script>