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 相关文章推荐
js TextArea的选中区域处理
Dec 28 Javascript
JavaScript Array Flatten 与递归使用介绍
Oct 30 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
May 04 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
Jan 19 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
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 空格,换行,跳格使用说明
2009/12/18 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP基于phpqrcode生成带LOGO图像的二维码实例
2015/07/10 PHP
js checkbox(复选框) 使用集锦
2009/04/28 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
Javascript动画的实现原理浅析
2015/03/02 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
jquery实现的动态回到顶部特效代码
2015/10/28 Javascript
基于jQuery下拉选择框插件支持单选多选功能代码
2016/06/07 Javascript
jQuery如何获取动态添加的元素
2016/06/24 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
iscroll动态加载数据完美解决方法
2017/07/18 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
搭建vue开发环境
2018/07/19 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
js计时事件实现圆形时钟
2020/03/25 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Python中的rjust()方法使用详解
2015/05/19 Python
Python迭代和迭代器详解
2016/11/10 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
python 利用栈和队列模拟递归的过程
2018/05/29 Python
详解Python odoo中嵌入html简单的分页功能
2019/05/29 Python
Python笔记之代理模式
2019/11/20 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
使用tensorflow进行音乐类型的分类
2020/08/14 Python
h5实现获取用户地理定位的实例代码
2017/07/17 HTML / CSS
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
党员一帮一活动总结
2014/07/08 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
2016入党心得体会范文
2016/01/06 职场文书
sql server 累计求和实现代码
2022/02/28 SQL Server