Ajax获取form表单提交数据

最新推荐文章于 2025-06-14 20:28:45 发布

强哥blog

最新推荐文章于 2025-06-14 20:28:45 发布

阅读量7.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Ajax

本文链接：https://blog.youkuaiyun.com/qq_36263601/article/details/72179225

Ajax 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个使用HTML创建表单并通过jQuery进行数据提交的例子。表单包含房间、建筑和部门三个字段，并通过JavaScript实现了表单数据的收集与发送功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html 
lang="en">
<head>
<meta 
charset="UTF-8">
<meta 
name="viewport" 
content="width=device-width, initial-scale=1.0">
<meta 
http-equiv="X-UA-Compatible" 
content="ie=edge">
<title>Document</title>
<script
src="jquery-1.11.1.min.js"></script>
</head>
<body>
<form 
id="_form" 
method="post">
<div 
class="fitem">
<label> 房间:</label>
<input
name="fangjian"
style="padding: 2px; width: 135px; border: 1px solid #A4BED4;"
required />
</div>
<div 
class="fitem">
<label> 建筑:</label>
<input
name="jianzhu"
class="easyui-combobox"
style="padding: 2px; width: 141px; "
required />
</div>
<div 
class="fitem">
<label> 部门:</label>
<input
name="bumen"
class="easyui-combobox"
style="padding: 2px; width: 141px; "
required />
</div>
</form>

<script>
$(function(){
/*var str_data = $('#_form input').map(function(){
return ($(this).attr('name')+'='+$(this).val());
}).get().join('&');
alert(str_data);
*/
$.ajax({
var str_data = $('#_form
input').map(function(){
return ($(this).attr('name')+"="+$(this).val());
}).get().join('&');
type:'post',
url:'url',
data:str_data,
success:function(msg){
// do something...
}
})
})
</script>
</body>
</html>