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

前端技术 2023/09/09 JavaScript
今天刚好看到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,就这么简单,如果适用的话,可以拿去用哟...

呵呵.

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

本文地址：https://www.stayed.cn/item/24520

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案