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();就行了,下面我来介绍两个提交表单数据的 ...
随机推荐
- [原创]ubuntu16.04LTS使用细节
如何给自己安装的应用创建桌面图标 拿php开发神器phpstorm为例,找到可执行文件所在路径. 这里是/home/haive/PhpStorm/bin/phpstorm.sh 打开dash,搜索&q ...
- caffe的python接口学习(7):绘制loss和accuracy曲线
使用python接口来运行caffe程序,主要的原因是python非常容易可视化.所以不推荐大家在命令行下面运行python程序.如果非要在命令行下面运行,还不如直接用 c++算了. 推荐使用jupy ...
- 《Effective java》-----读书笔记
2015年进步很小,看的书也不是很多,感觉自己都要废了,2016是沉淀的一年,在这一年中要不断学习.看书,努力提升自己!预计在2016年要看12本书,主要涉及java基础.Spring研究.java并 ...
- 使用Maven+Nexus+Jenkins+Svn+Tomcat+Sonar搭建持续集成环境(一)
前言 但凡一个略有规模的项目都需要一个持续集成环境的支撑,为什么需要持续集成环境,我们来看一个例子.假如一个项目,由A.B两位程序员来协作开发,A负责前端模块,B负责后端模块,前端依赖后端.A ...
- ABP源码分析三十三:ABP.Web
ABP.Web模块并不复杂,主要完成ABP系统的初始化和一些基础功能的实现. AbpWebApplication : 继承自ASP.Net的HttpApplication类,主要完成下面三件事一,在A ...
- vagrant 1.8.6 安装过程及总结遇到的坑
下面先总结遇到的问题,这些问题如果你也遇到,可能需要搜索很多次才能找到原因. 如果想看安装过程,可以先直接跳到后面第二部分部分. 1 问题汇总: 1.1 vagrant版本过高问题. vagrant ...
- Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果
Material Design Reveal effect(揭示效果) 你可能见过但是叫不出名字的小效果 前言: 每次写之前都会来一段(废)话.{心塞...} Google Play首页两个tab背景 ...
- 从零开始编写自己的C#框架——框架学习补充说明
非常感谢轩辕公子提出了对本框架的看法与意见,所以这里也将回复贴出来,让大家都了解一下 本系列的快速开发指的是,框架构建完毕后,在这个基础上开发新功能非常快捷方便,基本不用写太多代码就可以在短时间内完成 ...
- DDD 领域驱动设计-领域模型中的用户设计
上一篇:<DDD 领域驱动设计-如何控制业务流程?> 开源地址:https://github.com/yuezhongxin/CNBlogs.Apply.Sample(代码已更新,并增加了 ...
- ASP.NET Core 阶段性总结
自从年前用 ASP.NET 5 磕磕绊绊重写了一个项目后 (2015.12),就没怎么关注 ASP.NET 5 相关内容了,为啥?因为实际应用问题太多,而且不是正式版本,变化实在太快,可能你今天了解的 ...