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

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

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

很简单，附上代码：

; (function ($) { 

  $.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 = {}; 

    //textbox/隐藏域/textarea/radio选中值
    $(this).find('input[type="text"],input[type="hidden"],textarea,input[type="radio"]: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使用

$("#system-form").validate({
  rules: {
    SystemName: {
      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提交表单信息的简单方法(推荐)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。