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提交表单信息的更多相关文章
- jquery实现ajax提交表单
一般情况下,我们提交form表单采用的是submit的方法,典型的场景如下. <form id="thisForm" method="post" acti ...
- php使用jquery Form ajax 提交表单,并上传文件
在html5中我们通过FormData就可以ajax上传文件数据,不过因为兼容问题.我们选用jquery.form.min.js来进行ajax的表单提交. 一.jquery.form.js下载地址 ...
- 利用jquery进行ajax提交表单和附带的数据
1.获取表单数据: $form.serialize() 2.附带数据:input[status]=1 3.构造url链接:url = $form.attr('action') + '?input[st ...
- jquery 通过ajax 提交表单
1.需要引入以下两个js文件 <script src="Easyui/jquery-1.7.2.min.js"></script> <scrip ...
- jquery实现ajax提交表单的方法总结
方法一: 分别获取所需数据元素,DOM结构外层不用包form标签(适用于数据量少,数据元素分散于整个页面) $.ajax({ type: 'POST', url:'', data: { residen ...
- jQuery序列化Ajax提交表单
var formData=$("form").serialize(); $.ajax({ type: "POST", url: "/front/EPt ...
- jquery实现ajax提交表单数据或json数据
- Jquery ajax提交表单几种方法
在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...
- Jquery ajax提交表单几种方法详解
[导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...
随机推荐
- liunx 磁盘管理命令记录
Linux磁盘管理好坏管理直接关系到整个系统的性能问题. Linux磁盘管理常用三个命令为df.du和fdisk. df:列出文件系统的整体磁盘使用量 du:检查磁盘空间使用量 fdisk:用于磁盘分 ...
- linux-图形化远程管理协议
远程管理控制方式: RDP(remote desktop protocol)协议: telnet: SSH(Secure Shell): RFB(Remote FrameBuffer)协议(图形化远程 ...
- 我的MYSQL学习心得(二) 数据类型宽度
我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 【腾讯优测干货分享】如何降低App的待机内存(三)——探索内存增长的原因
本文来自于腾讯优测公众号(wxutest),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/8BiKIt3frq9Yv9KV5FXlGw 1.3新问题的进一步挖 ...
- Linux3 在VMware中搭建CentOS6.5虚拟机
前言: 本文主要是我在大家hadoop集群之前 ,需啊先安装CentOS虚拟机,记录在此,作为参考.如果能帮助到其他人,自然是更好啦. =========================== ...
- Ubuntu部署python3.5的开发和运行环境
Ubuntu部署python3.5的开发和运行环境 1 概述 由于最近项目全部由python2.x转向 python3.x(使用目前最新的 python3.5.1) ,之前的云主机的的默认python ...
- RangePartitioner 实现简记
摘要: 1.背景 2.rangeBounds 上边界数组源码走读 3.RangePartitioner的sketch 源码走读 4.determineBounds 源码走读 5.关于RangePart ...
- SQL Server 远程连接出错~~~无法访问服务器
异常处理汇总 ~ 修正果带着你的Net飞奔吧!http://www.cnblogs.com/dunitian/p/4599258.html 代理开一下 tcp/ip协议开一下 收工
- VS 2015相当不错的功能:C#交互窗口
按照惯例,老周是先吹牛后讲正事.今天就给大伙吹吹这个事. 有网友不知道是不是昨晚喝高了,居然研究起老周来了.实话告诉你,老周没什么好研究的,老周又不是编译器,老周只是一个游离于大善大恶之间的平凡人,说 ...
- ElasticSearch 5学习(7)——分布式集群学习分享2
前面主要学习了ElasticSearch分布式集群的存储过程中集群.节点和分片的知识(ElasticSearch 5学习(6)--分布式集群学习分享1),下面主要分享应对故障的一些实践. 应对故障 前 ...