jquery实现ajax提交表单信息的简单方法(推荐)

最近在思考优化项目，想自己扩展一个jquery自动获取表单中的数据进行ajax提交。本人没有完整性学习jquery，基本上是现学现找，有点困难。@H_404_1@

主要是扩展和拼接json转对象@H_404_1@

很简单，附上代码：@H_404_1@

$.fn.ajaxForm = function (options) {
var defaults = {
modelname: 'model',//后台对象接收名称
url: '/',//提交地址
postType: 'POST',//提交方式
dataType: 'JSON',//数据返回类型
async: false,//是否异步
optionObj: [],//自定义参数
callback: function () { },//成功回调
};
var options = $.extend(defaults,options);//合并参数

if (options.url == '') { 
  alert('请填写提交地址'); 
  return; 
} 
var postvals = {}; 

//text<a href="https://www.jb51.cc/tag/Box/" target="_blank" class="keywords">Box</a>/隐藏域/textarea/ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>选中值 
$(this).find('input[type="text"],input[type="hidden"],textarea,input[type="ra<a href="https://www.jb51.cc/tag/dio/" target="_blank" class="keywords">dio</a>"]:checked').each(function () { 
  if ($(this).val() != undefined) { 
    var name = $(this).attr('name'); 
    if (name == undefined || name == '') { 
      return false; 
    } 
    var value = $(this).val(); 
    var json = '{"' + name + '":"' + value + '"}'; 
    var obj = $.parseJSON(json); 
    postvals = $.extend(postvals,obj); 
  } 
}); 

var resObj; 
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);

使用的话配合jquery validate使用@H_404_1@

required: true },Description: { required: true,},messages: { SystemName: { required: "请填写系统名称" },Description: { required: "请填写系统描述" } },submitHandler: function(form) { var url = '/oa/system/' + $(form).attr('ftype'); $(form).ajaxForm({ url: url,modelname:'system',callback: function() { location.href = '/oa/system/index.html'; } }); } });

以上这篇jquery实现ajax提交表单信息的简单方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。@H_404_1@ 原文链接：https://www.f2er.com/ajax/46367.html

jquery实现ajax提交表单信息的简单方法(推荐)

猜你在找的Ajax相关文章