form表单提交的几种方法

最新推荐文章于 2025-06-01 16:33:58 发布

原创最新推荐文章于 2025-06-01 16:33:58 发布 · 4.6w 阅读

23 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

4 篇文章

订阅专栏

JSP

2 篇文章

订阅专栏

本文介绍了几种常见的HTML表单提交方式，包括普通的submit提交、使用AJAX进行异步提交、利用jQuery简化表单提交过程、纯JavaScript实现表单提交及通过onsubmit事件控制表单提交。

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

form表单提交的几种方法

[html] view plain copy

print ?

<form id="myform" name="myform" method="post" onsubmit="return sumbitTest();"
action="RegisterAction.action">
<table>
<tr>
<td>姓名:</td>
<td> <input type="text" name="name" /> </td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="sex" value="1"> 男
<input type="radio" name="sex" value="0"> 女
</td>
</tr>
<tr>
<td>年龄:</td>
<td>
<select name="age">
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Submit普通提交">
<input type="button" id="ajaxBtn" value="AJAX提交" />
<input type="button" id="jqueryBtn" value="jQuery提交" />
<input type="button" id="jsBtn" value="JS提交" />
<input type="submit" value="onSubmit提交" />
</td>
</tr>
</table>
</form>

<form id="myform" name="myform" method="post" onsubmit="return sumbitTest();" 
	  action="RegisterAction.action">
	<table>
		<tr>
			<td>姓名:</td>
			<td> <input type="text" name="name" /> </td>
		</tr>
		<tr>
			<td>性别:</td>
			<td>
				<input type="radio" name="sex" value="1"> 男
				<input type="radio" name="sex" value="0"> 女
			</td>
		</tr>
		<tr>
			<td>年龄:</td>
			<td>
				<select name="age">
					<option value="20">20</option>
					<option value="21">21</option>
					<option value="22">22</option>
				</select>
			</td>
		</tr>
		<tr>
			<td colspan="2">
				<input type="submit" value="Submit普通提交">
				<input type="button" id="ajaxBtn" value="AJAX提交" />
				<input type="button" id="jqueryBtn" value="jQuery提交" />
				<input type="button" id="jsBtn" value="JS提交" />
				<input type="submit" value="onSubmit提交" />
			</td>
		</tr>
	</table>
</form>

[javascript] view plain copy

print ?

<script type="text/javascript">
$(function() {
//ajax提交
$("#ajaxBtn").click(function() {
var params = $("#myform").serialize();
$.ajax( {
type : "POST",
url : "RegisterAction.action",
data : params,
success : function(msg) {
alert("success: " + msg);
}
});
})
//jQuery提交
$("#jqueryBtn").click(function(){
$("#myform").submit();
})
//js提交
$("#jsBtn").click(function(){
document.myform.action="RegisterAction.action";
document.myform.submit();
})
})
function sumbitTest(){
return true; //return false则不会提交
}
</script>

<script type="text/javascript">
	$(function() {
		//ajax提交
		$("#ajaxBtn").click(function() {
			var params = $("#myform").serialize();
			$.ajax( {
				type : "POST",
				url : "RegisterAction.action",
				data : params,
				success : function(msg) {
					alert("success: " + msg);
				}
			});
		})

		//jQuery提交
		$("#jqueryBtn").click(function(){
			$("#myform").submit();
		})

		//js提交 
		$("#jsBtn").click(function(){
			document.myform.action="RegisterAction.action";   
		    document.myform.submit();   
		})
	})
	function sumbitTest(){
		return true; //return false则不会提交 
	}
</script>

以上是比较常用的几种表单提交方式,但绝不局限于这些