使用ajax方式提交form表单。

jQuery.fn.ajaxSubmit
使用ajax方式提交form表单。

§   原型:

<jQuery> $(form).ajaxSubmit({
            url : '<string>', // 提交目标, 默认取自form的action
            type : 'POST|GET', // 提交方式 默认取自form 或者GET
            data : <hash>, // 额外需要提交的数据
            // 序列化表单数据之前回调函数, 可以尝试修改表单内容
            beforeSerialize : function(form, options){},
            // 数据准备好了, 准备提交, 这时候做些事情, 比较修改下序列化后数据
            beforeSubmit: function(elements, form, options){}
            // ... 其它$.ajax所支持的配置
});

§   举例:

$(form).ajaxSubmit({
            dataType:'json',
            type:'POST',
            success:function(json){
            console.info(json);
},
error:function(){alert('请求异常')},
complete:function(){
            buttons.attr('disabled', false);
},
beforeSubmit:function(){
            buttons.attr('disabled', true);
},
beforeSerialize:function(form, options){
            form[0].someinput.value = 'changed value';
}
});

 

jQuery.fn.ajaxForm
封装一个form表单, 让它可以使用验证, 可以ajax方式提交数据, 支持CTRL+S提交数据。

§   原型:

<jQuery> $(form).ajaxForm(
            jsonok, // <function>(json) 提交后回调函数
            infoHandler,     // <function>(element, msg, type, event) 验证提示处理函数
            // or jQuery | DOMElement
            beforeSubmit   // <function>(form)
// 数据准备好了, 准备提交, 这时候做些事情, 比较修改下序列化后数据
);

§   举例:

$(form).ajaxForm(function(json){
            if (json.state) {
                        cmstop.ok(json.info);
                        setTimeout(function(){
                                   location = '?otherurl';
                        }, 2000);
            } else {
                        cmstop.error(json.error);
            }
}, function(element, msg, type, event){
// element 提示的元素input, textarea, select
// msg 提示的信息
// type 提示的类型 vali_error, vali_pass, vali_verifing
// event $.event处理过的event
if (msg) {
            cmstop.tips(msg, type == 'vali_error' ? 'error' : ( type == 'vali_ok' ? 'ok' : 'warnning'));
            element.addClass(type);
}
}, function(form){
// 将忽略的数据disabled
form.find('input.ignored').attr('disabled', true);
return false; // 表示不提交
})

 

posted @ 2013-04-12 14:17  阳光小屋  阅读(569)  评论(0编辑  收藏  举报