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真的不难-回顾一下基础知识
Jan 15 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
js获得网页背景色和字体色的方法
Mar 21 Javascript
JScript中的条件注释详解
Apr 24 Javascript
jquery实现通用的内容渐显Tab选项卡效果
Sep 07 Javascript
JS常用字符串方法(推荐)
Jan 15 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
Jul 27 Javascript
vue 组件中slot插口的具体用法
Apr 03 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
浅析TypeScript 命名空间
Mar 19 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 Javascript
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(8) php 数组
2010/03/05 PHP
PHP STRING 陷阱原理说明
2010/07/24 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
php实现天干地支计算器示例
2014/03/14 PHP
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
百度地图API使用方法详解
2015/08/25 PHP
php和C#的yield迭代器实现方法对比分析
2019/07/17 PHP
dreamweaver 安装Jquery智能提示
2011/04/02 Javascript
JavaScript中Math对象方法使用概述
2014/01/02 Javascript
jquery中get,post和ajax方法的使用小结
2014/02/04 Javascript
javascript实现的一个随机点名功能
2014/08/26 Javascript
Javascript实现可旋转的圆圈实例代码
2015/08/04 Javascript
jQuery Mobile页面返回不需要重新get
2016/04/26 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
[01:39](回顾)各路豪强针锋相对,几经鏖战四强产生
2014/07/01 DOTA
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python如何读写csv数据
2018/03/21 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
法国购买隐形眼镜和眼镜网站:Optical Center
2019/10/08 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
企业管理专业个人求职信范文
2013/09/24 职场文书
医学院毕业生自荐信
2013/11/08 职场文书
电话销售经理岗位职责
2013/12/07 职场文书
档案检查欢迎词
2014/01/13 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
入党积极分子学习党的纲领思想汇报
2014/09/13 职场文书
银行反四风对照检查材料
2014/09/29 职场文书
泸县召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
售后服务承诺函格式
2015/01/21 职场文书
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫