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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
childNodes.length与children.length的区别
May 14 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
Dec 06 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
Jan 19 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
Feb 13 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
小程序云开发实现数据库异步操作同步化
May 18 Javascript
vue多个元素的样式选择器问题
Nov 29 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
我的论坛源代码(三)
2006/10/09 PHP
javascript 处理事件绑定的一些兼容写法
2009/12/24 Javascript
JQuery中的$.getJSON 使用说明
2011/03/10 Javascript
window.location.href = window.location.href 跳转无反应 a超链接onclick事件写法
2013/08/21 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
JavaScript整除运算函数ceil和floor的区别分析
2015/04/14 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
从零学习node.js之简易的网络爬虫(四)
2017/02/22 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
python 输出一个两行字符的变量
2009/02/05 Python
python图像处理之镜像实现方法
2015/05/30 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
解决tensorflow读取本地MNITS_data失败的原因
2020/06/22 Python
解决Pycharm双击图标启动不了的问题(JetBrains全家桶通用)
2020/08/07 Python
Dr.Jart+美国官网:韩国药妆品牌
2019/01/18 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
SQL数据库笔试题
2016/03/08 面试题
会计专业自我鉴定范文
2013/12/29 职场文书
动画设计系毕业生求职信
2014/07/15 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
2015年新农村建设工作总结
2015/05/22 职场文书
SpringBoot 集成Redis 过程
2021/06/02 Redis
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫