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();就行了,下面我来介绍两个提交表单数据的 ...
随机推荐
- Firefox开发者专版浏览器,Web开发者利器.
2015的11月9日,Firefox迎来了自己的十周岁生日.在庆祝Firefox十周年之际,Mozilla发布了Firefox开发者专版,这是首款专门为开发者打造的浏览器. 浏览器中独特的暗色调设计. ...
- useful commands for docker beginner
You may want to add my wechat public account or add my technical blog's RSS feed This list is meant ...
- ★Kali信息收集~2.Whois :域名信息
Web地址:http://whois.chinaz.com/ | http://www.whois.net/ 软件参数:whois 常用命令:whois 域名 (重点看whois server和R ...
- JavaScript权威设计--JavaScript类型,值,变量(简要学习笔记三)
1.负号是一元求反运算 如果直接给数字直接量前面添加负号可以得到他们的负值 2.JavaScript中的运算超出了最大能表示的值不会报错,会显示Infinity. 超出最小也不报错,会显示-I ...
- JS中 call() 与apply 方法
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...
- .Net MVC 网站中配置文件的读写
网站中有很多需要设置的内容,像网站信息,注册设置,上传设置等.如果保存在数据库中需要单独建张表,表中只有一条记录,这样会让数据库很臃肿,而且频繁存取数据库的效率也是个问题.而保存在config文件里是 ...
- 构建高可用ZooKeeper集群
ZooKeeper 是 Apache 的一个顶级项目,为分布式应用提供高效.高可用的分布式协调服务,提供了诸如数据发布/订阅.负载均衡.命名服务.分布式协调/通知和分布式锁等分布式基础服务.由于 Zo ...
- 详解Javascript中正则表达式的使用
正则表达式用来处理字符串特别好用,在JavaScript中能用到正则表达式的地方有很多,本文对正则表达式基础知识和Javascript中正则表达式的使用做一个总结. 第一部分简单列举了正则表达式在Ja ...
- RPC远程过程调用学习之路(一):用最原始代码还原PRC框架
RPC: Remote Procedure Call 远程过程调用,即业务的具体实现不是在自己系统中,需要从其他系统中进行调用实现,所以在系统间进行数据交互时经常使用. rpc的实现方式有很多,可以通 ...
- 初步认识Node 之Node为何物
很多人即便是在使用了Node之后也不知道它到底是什么,阅读完本文你应该会有一个初步的.具体的概念了. Node的目标 提供一种简单的构建可伸缩网络程序的方法.那么,什么是可伸缩网络程序呢?可伸缩 ...