ajax异步提交表单

发布时间：2020-12-15 21:42:49 所属栏目：百科来源：网络整理

导读：使用ajax来提交整个表单的内容，并且不跳转页面，也就是异步提交啦需要用到两个js文件下述代码请在装php环境中测试，或者直接为这个测试新建一个站点就行了，反正一定要确保php是可用的 html代码 !DOCTYPE htmlhtml lang="en"headmeta charset="UTF-8"titl

使用ajax来提交整个表单的内容，并且不跳转页面，也就是异步提交啦

需要用到两个js文件

下述代码请在装php环境中测试，或者直接为这个测试新建一个站点就行了，反正一定要确保php是可用的

html代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery.min.js"></script>
	<script type="text/javascript" src="jquery.form.js"></script>
</head>
<body>
	<!-- 两种提交模式 -->
	<!-- 模式一 将提交的 URL 和 提交的方式写在JS中 -->
	<script type="text/javascript">
		$(function(){
			$("#sub-btn").click(function(){
				$("#testForm").ajaxSubmit({
					type:'post',url:'test.php',dataType:  'json',success: function(data) {
			            alert(data.test2);
			        },error:function(xhr){          //上传失败 
			            alert(xhr.responseText);
			        } 
			    });
			});
		});
	</script>

	<form id="testForm">
		<input type="text" name="test" value="test" />
		<input type="text" name="test1" value="test1" />
		<input type="text" name="test2" value="test2" />
		<input type="text" name="test3" value="test3" />
		<input type="button" id="sub-btn" value="submit" />
	</form>

	<!-- 模式二 将action 和 method 写在 form表单中 -->
	<script type="text/javascript">
		$(function(){
			$("#sub-btn").click(function(){
				$("#testForm2").ajaxSubmit({
			        dataType:  'json',error:function(xhr){          //上传失败 
			            alert(xhr.responseText);
			        } 
			    });
			});
		});
	</script>

	<form id="testForm2" method="post" action="test.php">
		<input type="text" name="test" value="test" />
		<input type="text" name="test1" value="test1" />
		<input type="text" name="test2" value="test2" />
		<input type="text" name="test3" value="test3" />
		<input type="button" id="sub-btn" value="submit" />
	</form>
</body>
</html>

其中test.php代码

<?php
	echo json_encode($_POST);
?>

这样就能实现异步提交并且根据返回值来确定是不是正确提交了

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!