jQuery 调用Ajax技术判断用户名和密码输入是否正确

昨天做了一个原生的Ajax判断用户名和密码输入正确，今天在昨天的基础上做一个用jQuery 调用Ajax技术判断用户名和密码输入是否正确的案例！

首先，将jquery-xxx.min.js 引用到jsp中，没有的可以去网上找一个！ xxx为版本

一、jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%String bathPath=request.getContextPath(); %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="<%=bathPath%>/js/jquery-2.1.1.min.js"></script>

//ajax异步请求判断用户密码是否正确
function passwordIsTrue(){
   //获取用户名和密码内容
   var sendContent = document.getElementById("account").value;
   var password = document.getElementById("password").value;
   //获取错误信息提示对象
   var msg = document.getElementById("msg");
   console.log(sendContent);//打印到控制台（开发者模式）
   $.ajax({
       url:"passwordIsTrue.handler",//请求地址
       type:"post",//请求方式
       data:"sendContent="+sendContent+"&password="+password,//发送信息
       dataType:"text",//服务器响应信息类型，不写则为默认
       success:function(responseContent){ //success:function(responseContent)为回调函数 responseContent为接收响应信息
           if(responseContent=='false'){
               msg.innerHTML="用户密码输入错误";
               document.getElementById("account").select();
           }else{
               msg.innerHTML="";
           }
       }
   })
}
</script>

二、controller层

@Controller
@ResponseBody
public class AjaxLoginController {
@Autowired
private AjaxLoginService ajaxLoginService;

   public AjaxLoginService getAjaxLoginService() {
       return ajaxLoginService;
   }

   public void setAjaxLoginService(AjaxLoginService ajaxLoginService) {
       this.ajaxLoginService = ajaxLoginService;
   }
   /**
   * 查找用户(看用户是否存在)
   * @param sendContent
   * @param response
   * @return
   * @throws IOException
   */
   @Autowired
   HttpServletResponse response;

   @RequestMapping("accountIsTrue.handler")
   public String findAccount(@RequestParam("sendContent") String sendContent) throws IOException {
   System.out.println(sendContent);
       boolean flag = ajaxLoginService.findAccount(sendContent);
       System.out.println(flag);
       PrintWriter out = response.getWriter();//给页面响应
       if(flag==true) {
           out.print(true);
       }else {
           out.print(false);
       }
       return null;
   }
   /**
   * 根据用户名查找密码
   * @param model
   * @param sendContent
   * @param password
   * @return
   * @throws IOException
   */
   @RequestMapping("passwordIsTrue.handler")
   public String passwordIdTrue(Model model,String sendContent,String password) throws IOException {
       System.out.println(sendContent+password);
       String resultPassword = ajaxLoginService.findPassword(sendContent);
       PrintWriter out = response.getWriter();//给页面响应
       /*根据用用户名查到的密码和页面传过来对的密码做对比，
       如果两者一样说明密码输入正确，
       如果查到的密码和页面输入的密码不一样，说明输入的密码不正确*/
       if(resultPassword.equals(password)) {
           out.print(true);;
       }else {
           out.print(false);;
       }
       return null;
   }
}

如果页面传过来的中文出现乱码，请参考昨天写的“原生ajax判断用户名和密码是否输入正确”里边的过滤器配置，配置过滤器后中文乱码问题就会得以解决。

结束！！！

赠言：jQuery调用Ajax技术还有另外几种方式，上述只是其中的一种，上述的只要学会，其他几种只需参考就能弄懂

jQuery 调用Ajax技术判断用户名和密码输入是否正确

猜你喜欢