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

前端之家收集整理的这篇文章主要介绍了jquery实现ajax提交表单信息的简单方法(推荐)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

很简单,附上代码

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

  1. if (options.url == '') {
  2. alert('请填写提交地址');
  3. return;
  4. }
  5. var postvals = {};
  6. //text<a href="/tag/Box/" target="_blank" class="keywords">Box</a>/隐藏域/textarea/ra<a href="/tag/dio/" target="_blank" class="keywords">dio</a>选中值
  7. $(this).find('input[type="text"],input[type="hidden"],textarea,input[type="ra<a href="/tag/dio/" target="_blank" class="keywords">dio</a>"]:checked').each(function () {
  8. if ($(this).val() != undefined) {
  9. var name = $(this).attr('name');
  10. if (name == undefined || name == '') {
  11. return false;
  12. }
  13. var value = $(this).val();
  14. var json = '{"' + name + '":"' + value + '"}';
  15. var obj = $.parseJSON(json);
  16. postvals = $.extend(postvals,obj);
  17. }
  18. });
  19. var resObj;
  20. if (options.optionObj != undefined || options.optionObj!=[]) {
  21. resObj = $.extend(postvals,options.optionObj);
  22. } else {
  23. resObj = postvals;
  24. }
  25. $.ajax({
  26. type: options.postType,dataType: options.dataType,data: resObj,async: options.async,url: options.url,success: function (json) {
  27. if (json.IsError) {
  28. alert(json.Message);
  29. } else {
  30. options.callback();
  31. }
  32. }
  33. });

};

})(jQuery);

使用的话配合jquery validate使用

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提交表单信息的简单方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。

猜你在找的Ajax相关文章