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


Posted in Javascript onAugust 24, 2016

最近在思考优化项目,想自己扩展一个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提交表单信息的简单方法(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 面向对象之重载
May 04 Javascript
JavaScript Chart 插件整理
Jun 18 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
shiro授权的实现原理
Sep 21 Javascript
vue.js在标签属性中插入变量参数的方法
Mar 06 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
WEB前端性能优化的7大手段详解
Feb 04 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 Javascript
vue实现在data里引入相对路径
Jun 05 Vue.js
AngularJS下对数组的对比分析
Aug 24 #Javascript
AngularJS  $modal弹出框实例代码
Aug 24 #Javascript
AngularJS中比较两个数组是否相同
Aug 24 #Javascript
javascript深拷贝(deepClone)详解
Aug 24 #Javascript
js实现无缝循环滚动
Jun 23 #Javascript
jquery实现网页定位导航
Aug 23 #Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 #Javascript
You might like
php自动适应范围的分页代码
2008/08/05 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
jQuery获取Select选择的Text和Value(详细汇总)
2013/01/25 Javascript
比较新旧两个数组值得增加和删除的JS代码
2013/10/30 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
js在IE与firefox的差异集锦
2014/11/11 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
jQuery扁平化风格下拉框美化插件FancySelect使用指南
2015/02/10 Javascript
HTML+CSS+JS实现完美兼容各大浏览器的TABLE固定列
2015/04/26 Javascript
javascript限制文本框输入值类型的方法
2015/05/07 Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
如何提高Dom访问速度
2017/01/05 Javascript
angularjs数组判断是否含有某个元素的实例
2018/02/27 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
JavaScript实现英语单词题库
2019/12/24 Javascript
python递归函数绘制分形树的方法
2018/06/22 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
python 实现GUI(图形用户界面)编程详解
2019/07/17 Python
正则给header的冒号两边参数添加单引号(Python请求用)
2019/08/09 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
学习雷锋演讲稿
2014/05/10 职场文书
小学生读书活动总结
2014/06/30 职场文书
优秀纪检干部材料
2014/08/27 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
归元寺导游词
2015/02/06 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
公司新员工欢迎词
2015/09/30 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
python3 hdf5文件 遍历代码
2021/05/19 Python