使用ajax提交form表单数据

最新推荐文章于 2022-04-08 18:54:56 发布

转载最新推荐文章于 2022-04-08 18:54:56 发布 · 583 阅读

文章标签：

#ajax #表单

本文介绍了一种使用Ajax技术进行登录验证的方法。通过一个具体的示例展示了如何利用jQuery发起POST请求到服务器端，并处理返回的数据。该示例还涵盖了前端页面的搭建过程，包括表单元素的设置及按钮点击事件的绑定。

脚本部分

<script type="text/javascript">
	function btn(){
		$.ajax({
			url:"login.action",//要连接的服务器位置
			type:"post",
			data:$('#form_id').serialize(),//表单数据
			success: function(data){//成功后的回调函数
				switch(parseInt(data)){
				case 0://登陆成功
					alert("登陆成功");
					window.location.href = "staff.action";
					break;
				case 1://登陆失败
					alert("登陆失败，用户名或密码错误");
					break;
				}
			}
		});
	}
</script>

html部分

<body>
	<div id="main_div">
		<form id="form_id" action="login" method="post">
			用户名：<input type="text" name="userBean.loginName" /><br /> 密码：<input
				type="password" name="userBean.loginPassword" /><br /> <input
				type="button" value="登陆" onclick="btn()" />
		</form>
	</div>
</body>