Jquery通过Ajax方式来提交Form表单的具体实现


Posted in Javascript onNovember 07, 2013

今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是:

保存数据到服务器,成功时显示信息。
jQuery 代码:

$.ajax({ 
type: "POST", 
url: "some.php", 
data: "name=John&location=Boston", 
success: function(msg){ 
alert( "Data Saved: " + msg ); 
} 
});

后来我就想了一下,我要提交form表单有没有办法呢?但是我不可能每个fom的input都写一次var demo=$("#divname").val();的.
后来,今天我看到一个方法,就是.map,就做出一下想法了,可以借鉴哟;
html代码如下,下面我要提交Form 的id为dlg_form的所有input数据,
<form id="dlg_form" method="post"> 
<div class="fitem"> 
<label> 房间:</label> 
<input name="RoomName" style="padding: 2px; width: 135px; border: 1px solid #A4BED4;" required /> 
</div> 
<div class="fitem"> 
<label> 建筑:</label> 
<input name="RoomName" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<div class="fitem"> 
<label> 部门:</label> 
<input name="RoomName" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<fieldset> 
<legend> 
<label> 
<input type="checkbox" id="ktkzq" name="ktkzq" value="ktkzq"/> 
空调控制器</label> 
</legend> 
<div class="fitem"> 
<label> 端口:</label> 
<input name="kt_dk" id="kt_dk" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<div class="fitem"> 
<label> 地址:</label> 
<input name="kt_dz" id="kt_dz" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<div class="fitem"> 
<label> 工作方式:</label> 
<input name="kt_gzfs" id="kt_gzfs" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<div class="fitem"> 
<label> 是否启用:</label> 
<input name="kt_sfqy" id="kt_sfqy" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
</fieldset> 
<fieldset> 
<legend> 
<label> 
<input type="checkbox" id="dgkzq" name="dgkzq" value="dgkzq"/> 
灯光控制器</label> 
</legend> 
<div class="fitem"> 
<label> 端口:</label> 
<input name="dg_dk" id="dg_dk" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<div class="fitem"> 
<label> 地址:</label> 
<input name="dg_dz" id="dg_dz" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<div class="fitem"> 
<label> 工作方式:</label> 
<input name="dg_gzfs" id="dg_gzfs" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
<div class="fitem"> 
<label> 是否启用:</label> 
<input name="dg_sfqy" id="dg_sfqy" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
</fieldset> 
<div class="fitem"> 
<label style=" width:100px;"> 
<input type="checkbox" id="zongbiao" name="zongbiao" value="zongbiao"/> 
安装了总表:</label> 
</div> 
<div class="fitem"> 
<label> 总表电能节点:</label> 
<input name="zbdnjd" id="zbdnjd" disabled="disabled" class="easyui-combobox" style="padding: 2px; width: 141px; " required /> 
</div> 
</form>

是不是很多,如果要你每个input都写的话,是不是要吐血?
看看我的方法,首先我们把所有的input的name和value都取下来,
js代码如下:
var str_data=$("#dlg_form input").map(function(){ 
return ($(this).attr("name")+'='+$(this).val()); 
}).get().join("&") ; 
alert(data);

ps:你alert一下,你会发现,这里面的架构就是divname=xxx&divname2=xxxx等等,

然后在回头看看ajax提交的:

$.ajax({ 
type: "POST", 
url: "some.php", 
data: "name=John&location=Boston", 
success: function(msg){ 
alert( "Data Saved: " + msg ); 
} 
});

有没有发现,只要我们把我们上面获取到的,放到data里面就可以了?

完整的代码,修改后应该是

$.ajax({ var str_data=$("#dlg_form input").map(function(){ 
return ($(this).attr("name")+'='+$(this).val()); 
}).get().join("&") ; 
type: "POST", 
url: "some.php", 
data: str_data, 
success: function(msg){ 
alert( "Data Saved: " + msg ); 
} 
});

ok,就这么简单,如果适用的话,可以拿去用哟...

呵呵.

如果有问题,也欢迎提出来.

Javascript 相关文章推荐
jquery 上下滚动广告
Jun 17 Javascript
Node.js生成HttpStatusCode辅助类发布到npm
Apr 09 Javascript
阻止子元素继承父元素事件具体思路及实现
May 02 Javascript
javascript自定义右键弹出菜单实现方法
May 25 Javascript
JavaScript中使用Math.PI圆周率属性的方法
Jun 14 Javascript
javascript跨域的方法汇总
Oct 23 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
浅谈super-vuex使用体验
Jun 25 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
Ant Design的Table组件去除
Oct 24 Javascript
Checbox的操作含已选、未选及判断代码
Nov 07 #Javascript
js操作label给label赋值及取label的值示例
Nov 07 #Javascript
js实现幻灯片播放图片示例代码
Nov 07 #Javascript
JS实现定时页面弹出类似QQ新闻的提示框
Nov 07 #Javascript
得到form下的所有的input的js代码
Nov 07 #Javascript
基于jquery插件制作左右按钮与标题文字图片切换效果
Nov 07 #Javascript
简单的Jquery全选功能
Nov 07 #Javascript
You might like
PHP删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
php调用dll的实例操作动画与代码分享
2012/08/14 PHP
php查询及多条件查询
2017/02/26 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP crc32()函数讲解
2019/02/14 PHP
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
jQuery动态添加
2016/04/07 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
jQuery扩展_动力节点Java学院整理
2017/07/05 jQuery
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
JS实现图片切换效果
2018/11/17 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
vue实现购物车的小练习
2020/12/21 Vue.js
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
Python Socket编程详细介绍
2017/03/23 Python
python类的继承实例详解
2017/03/30 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python hmac模块使用实例解析
2019/12/24 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
python3排序的实例方法
2020/10/20 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
EJB timer的种类
2014/10/28 面试题
社区十八大感言
2014/01/19 职场文书
《太阳》教学反思
2014/02/21 职场文书
讲文明树新风公益广告宣传方案
2014/02/25 职场文书
事业单位聘任报告
2015/03/02 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
Python turtle实现贪吃蛇游戏
2021/06/18 Python