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();就行了,下面我来介绍两个提交表单数据的 ...
随机推荐
- nginx安装
nginx工作模式-->1个master+n个worker进程 安装nginx的所需pcre库[用于支持rewrite模块] 下载软件方法: 搜索 pcre download 网址:http: ...
- Struts的拦截器
Struts的拦截器 1.什么是拦截器 Struts的拦截器和Servlet过滤器类似,在执行Action的execute方法之前,Struts会首先执行Struts.xml中引用的拦截器,在执行完所 ...
- babel-loader-presets
babel-loader的presets的设置有一定的顺序.es2015必须出现在stage-0前面,我记得这是因为es2015是ES6的标准,state-0等是对ES7一些提案的支持, state- ...
- 我想立刻辞职,然后闭关学习编程语言,我给自己3个月时间学习C语言!这样行的通吗
文章背景,回答提问:我想立刻辞职,然后闭关学习编程语言,我给自己3个月时间学习C语言!这样行的通吗? 我的建议是这样:1. 不要辞职.首先说,你对整个开发没有一个简单的了解,或一个系统的入门学习.换句 ...
- (原创) alljoyn物联网实验之手机局域网控制设备
AllJoyn开源物联网协议框架,官方描述是一个能够使连接设备之间进行互操作的通用软件框架和系统服务核心集,也是一个跨制造商来创建动态近端网络的软件应用.高通已经将该项目捐赠给了一个名为“AllSee ...
- (转)C++语言的15个晦涩特性
原文链接: Evan Wallace 翻译: 伯乐在线- 敏敏 译文链接: http://blog.jobbole.com/54140/ 这个列表收集了 C++ 语言的一些晦涩(Obscure)特 ...
- CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率
CSharpGL(30)用条件渲染(Conditional Rendering)来提升OpenGL的渲染效率 当场景中有比较复杂的模型时,条件渲染能够加速对复杂模型的渲染. 条件渲染(Conditio ...
- Entity Framework 与 面向对象
说要分享,我了个*,写了一半放草稿箱了两个星期都快发霉了,趁着周末写完发出来吧. 文章分为五部分: 基础.类讲述的是用到的一些EF与面向对象的基础: 业务是讲怎么划分设计业务: 设计模式和工作模式讲述 ...
- Android Starting Window(Preview Window)
当打开一个Activity时,如果这个Activity所属的应用还没有在运行,系统会为这个Activity所属的应用创建一个进程,但进程的创建与初始化都需要时间,在这个动作完成之前系统要做什么呢?如果 ...
- CI Weekly #8 | CI/CD 技能进阶路线
在使用 flow.ci 进行持续集成的过程中,也许你会遇到一些小麻烦.最近我们整理了一些常见问题在 flow.ci 文档之 FAQ,希望对你有用.如果你遇到其他问题,也可以通过「在线消息」或去 Git ...