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 相关文章推荐
onpropertypchange
Jul 01 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
Mar 26 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
Aug 02 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
js遍历json对象所有key及根据动态key获取值的方法(必看)
Mar 09 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
基于input框覆盖掉数字英文的实例讲解
Jul 21 Javascript
React Native使用百度Echarts显示图表的示例代码
Nov 07 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
JS中FileReader类实现文件上传及时预览功能
Mar 27 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
Protoss魔法科技
2020/03/14 星际争霸
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
PHP与MYSQL中UTF8编码的中文排序实例
2014/10/21 PHP
PHP简单判断字符串是否包含另一个字符串的方法
2016/03/25 PHP
PHP实现的网站目录扫描索引工具
2016/09/08 PHP
PHP目录操作实例总结
2016/09/27 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
jQuery 使用手册(六)
2009/09/23 Javascript
那些年,我还在学习jquery 学习笔记
2012/03/05 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
2016/01/12 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
2018/04/01 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
js实现浏览器打印功能的示例代码
2020/07/15 Javascript
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
Python中的魔法方法深入理解
2014/07/09 Python
python中的__slots__使用示例
2015/02/26 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
Python 私有化操作实例分析
2019/11/21 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
求网格中的黑点分布
2013/11/06 面试题
总经理秘书岗位职责
2014/03/17 职场文书
经销商订货会主持词
2014/03/27 职场文书
《小鹰学飞》教学反思
2014/04/23 职场文书
实习生个人总结范文
2015/02/28 职场文书
电影复兴之路观后感
2015/06/02 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
Mac电脑OS系统下安装Nginx的详细教程
2022/04/14 Servers