Jquery通过Ajax方式来提交Form表单的具体实现
更新时间：2013年11月07日 17:26:55 投稿：whsnow
提交Form表单的方法有很多，在本文为大家介绍下Jquery通过Ajax方式是如何提交Form表单的
今天刚好看到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的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,就这么简单,如果适用的话,可以拿去用哟...
呵呵.
如果有问题,也欢迎提出来.
相关文章
常用的jquery模板插件——jQuery Boilerplate介绍
Query Boilerplate是一个不错的jQuery插件开发工具，使用这个工具可以帮助你快速的构建一个jQuery框架。这个工具提供你很多评论用以帮助你使得开发变得简单和直接，它是个真正的面对对象的工具，你可以实现公开或者私有的方法或者公开或者私有的属性。2014-09-09
这篇文章主要介绍了打造自己的jQuery插件,简单分析了jQuery插件的原理与基本实现技巧,需要的朋友可以参考下2016-09-09
Ben最近在负责一个购书网站，在网站的首页上，有一个叫做“最新上架”的板块，板块的内容比较简单，只有书籍名称，作者姓名和上架时间（如图），当初设计的时候并i没有过于丰富的构思2010-10-10
这篇文章主要介绍了利用jquery.qrcode在页面上生成二维码且支持中文。需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
JQuery魔力之$("tagName")与selector
DOM 中的 getElementsByTagName()方法在JQuery中的表现就是$(“tagName”)这么简单！tag标签（可以是：p、div、button …）标签本身具有ID、Class等属性2012-03-03
本文给大家分享基于jquery实现弹窗居中效果类似于alert(),代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下2017-02-02
这篇文章主要介绍了jQuery简单实现上下,左右滑动的方法,涉及jQuery动态操作页面元素的相关技巧,需要的朋友可以参考下2016-06-06
下面小编就为大家带来一篇jquery ezUI 双击行记录弹窗查看明细的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了 jQuery快速实现商品数量加减的方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-02-02
详谈jQuery中使用attr(), prop(), val()获取value的异同
下面小编就为大家带来一篇详谈jQuery中使用attr(), prop(), val()获取value的异同。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-04-04
最新评论