你的位置:首页 > Java教程

[Java教程]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';        } });      }    });

  

 

代码可能有些问题,有时间看看