jquery实现ajax提交表单信息的简单方法(推荐)
最近在思考优化项目，想自己扩展一个jquery自动获取表单中的数据进行ajax提交。本人没有完整性学习jquery，基本上是现学现找，有点困难。
主要是扩展和拼接json转对象
很简单，附上代码：
;(function($){
$.fn.ajaxForm=function(options){
vardefaults={
modelname:'model',//后台对象接收名称
url:'/',//提交地址
postType:'POST',//提交方式
dataType:'JSON',//数据返回类型
async:false,//是否异步
optionObj:[],//自定义参数
callback:function(){},//成功回调
};
varoptions=$.extend(defaults,options);//合并参数
if(options.url==''){
alert('请填写提交地址');
return;
}
varpostvals={};
//textbox/隐藏域/textarea/radio选中值
$(this).find('input[type="text"],input[type="hidden"],textarea,input[type="radio"]:checked').each(function(){
if($(this).val()!=undefined){
varname=$(this).attr('name');
if(name==undefined||name==''){
returnfalse;
}
varvalue=$(this).val();
varjson='{"'+name+'":"'+value+'"}';
varobj=$.parseJSON(json);
postvals=$.extend(postvals,obj);
}
});
varresObj;
if(options.optionObj!=undefined||options.optionObj!=[]){
resObj=$.extend(postvals,options.optionObj);
}else{
resObj=postvals;
}
$.ajax({
type:options.postType,
dataType:options.dataType,
data:resObj,
async:options.async,
url:options.url,
success:function(json){
if(json.IsError){
alert(json.Message);
}else{
options.callback();
}
}
});
};
})(jQuery);
使用的话配合jqueryvalidate使用
$("#system-form").validate({
rules:{
SystemName:{
required:true
},
Description:{
required:true,
},
},
messages:{
SystemName:{
required:"请填写系统名称"
},
Description:{
required:"请填写系统描述"
}
},
submitHandler:function(form){
varurl='/oa/system/'+$(form).attr('ftype');
$(form).ajaxForm({url:url,modelname:'system',callback:function(){
location.href='/oa/system/index.html';
}});
}
});
以上这篇jquery实现ajax提交表单信息的简单方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。