jQuery+ajax实现修改密码验证

1.前端代码：

​
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<form action="" method="post" id="fm">
	
		<div class="div_ads">
		<font>${msg }</font>

			<table>
<%--				<input type="text"  name="pwd" class="form-control" value="${pwd}" style="display: none"/>--%>

				<tr>
					<td>新密码：</td>
					<td><input type="password"  name="pwd1" id="pwd1" class="form-control"  /></td>
				</tr>
				<tr>
					<td>再次输入新密码：</td>
					<td><input type="password" name="pwd2" id="pwd2" class="form-control"  /></td>
				</tr>
				<tr>
					<h4 style="color: red" id="msg"></h4>
				</tr>
				<tr>
					<td style="text-align: center"><input type="submit" id="updateBtn" value="修改" class="btn btn-success" /></td>
					<td style="text-align: center"><input type="reset" value="重置" class="btn btn-warning" /></td>
				</tr>
			</table>

		</div>
	</form>

​

2.js代码：

 <script type="text/javascript">
	  var ctx = "${ctx}";

	  //获取url中的参数

	  $(function(){
	  	// alert("111")
	  	var userName = window.location.href;




		  //ajax请求修改密码

		  var rePassword = $("#yuanpwd").val();



		  //新密码校验

		  $("#pwd1").blur(function(){
		  	// alert(222)
			  $("#msg").css("display","none");
			  var newPassword = $("#pwd1").val();
			  if(newPassword==""||newPassword==null){
				  $("#msg").html("请输入新密码！").css("display","block");

			  }

		  });



		  //重复密码校验

		  $("#pwd2").blur(function(){
			  var newPass = $("#pwd1").val();

			  var repPass = $("#pwd2").val();

			  if(newPass != repPass){
				  $("#msg").html("两次输入密码不一致,请重输！").css("display","block");

			  }else {
				  $("#msg").css("display","none");
			  }

		  });



		  //表单提交前校验

		  $("#updateBtn").click(function(){
			  var flag = true;

			  var newPass = $("#pwd1").val();

			  var repPass = $("#pwd2").val();



			  if(newPass!=repPass||newPass ==""||newPass==null){
				  flag = false;

			  }

			  if(flag){
				  $.ajax({
					  url:ctx+"/ServletUpdatePWD",
					  type:"POST",
					  async:false,
					  data:$("#fm").serialize(), //表单数据序列化, 可以对form表单进行序列化，从而将form表单中的所有参数传递到服务端。
					  success:function(data){
						  //json字符串转为json对象
							// alert(data)
						  // var jsonObj=eval("("+data+")");
						  if(data>=0){
							  alert("修改密码成功！");

							  window.parent.location.href=ctx+"/login/login.jsp";

						  }else{
							  alert("修改失败！");

						  }

					  },

					  error:function(e){
						  alert("请求出错！");

					  }

				  });

			  }

		  });

	  });

  </script>

3.后台代码：

@WebServlet("/ServletUpdatePWD")
public class ServletUpdatePWD extends HttpServlet{
	

	
	public void doGet(HttpServletRequest request,HttpServletResponse response)
			throws ServletException,IOException{

		response.setContentType("application/json;charset=utf-8");
		String stuNum=(String) request.getSession().getAttribute("usernum");
		String password=request.getParameter("pwd1");
		User user = new User();
		user.setUserNum(stuNum);
		user.setPassword(password);
		int i = new UserDaoImpl().editPwd(user);

		System.out.println("password:"+password);
		PrintWriter out = response.getWriter();

		String json= JSON.toJSONString(i);

		out.print(json);

	}
	public void doPost(HttpServletRequest request,HttpServletResponse response)
			throws ServletException,IOException{
		doGet(request,response);
	}

}