狂神说Java【SMBMS】——SMBMS超市订单管理系统(五) ——使用Ajax优化密码修改功能

 

​ 在前面的密码修改中，我们避开使用了前端素材中验证旧密码的Ajax功能，是因为要把Ajax单独拿出来讲

​ 前面实现的密码修改功能是直接输入两遍新密码进行的修改，这显然是不安全的，所以我们应该在修改密码的时候加入验证旧密码的操作，而这个操作根据前端素材就需要使用到Ajax了

1.什么是Ajax

1. AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

2. AJAX 不是新的编程语言，而是一种使用现有标准的新方法

3. AJAX 是在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的艺术

   • 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新
   • 这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

4. 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面

2.怎么实现旧密码验证？

​ 直接的做法就是去数据库中查找，但是这样的画我们又要写一条线：Dao开始-->service-->servlet-->JSP

​ 我们可以采取一种很简单的方式进行：在用户登陆的时候我们将整个用户对象都存储到session中了，所以我们可以利用Ajax的异步请求+session中的user对象实现旧密码的验证

​ 做法就是在后端复用的servlet中再定义一个方法，这个方法专门负责对比Ajax传递给后端的旧密码是否和session中User对象的密码一致，并通过对比的情况和结果来返回JSON数据给前端

3.编写servlet

oldpassword.on("blur",function(){
   $.ajax({
      type:"GET",
      url:path+"/jsp/user.do",//Ajax提交的URL，可见和我们修改密码的JSP页面的表单提交的URL一样，所以我们应该复用servlet
      data:{method:"pwdmodify",oldpassword:oldpassword.val()},//提交的参数
      //上面两句话等价于 = path+/jsp/user.do ? method=pwdmodify & oldpassword=oldpassword.val()

           dataType:"json",
      success:function(data){
         if(data.result == "true"){//旧密码正确
            validateTip(oldpassword.next(),{"color":"green"},imgYes,true);
         }else if(data.result == "false"){//旧密码输入不正确
            validateTip(oldpassword.next(),{"color":"red"},imgNo + " 原密码输入不正确",false);
         }else if(data.result == "sessionerror"){//当前用户session过期，请重新登录
            validateTip(oldpassword.next(),{"color":"red"},imgNo + " 当前用户session过期，请重新登录",false);
         }else if(data.result == "error"){//旧密码输入为空
            validateTip(oldpassword.next(),{"color":"red"},imgNo + " 请输入旧密码",false);
         }
      },
      error:function(data){
         //请求出错
         validateTip(oldpassword.next(),{"color":"red"},imgNo + " 请求错误",false);
      }
   });

    //2.验证旧密码
    //直接与session中的user对象的密码进行对比即可，不用再去查数据库
    public void pwdModify(HttpServletRequest req, HttpServletResponse resp){
        Object user = req.getSession().getAttribute(Constants.USER_SESSION);
        String oldpassword = req.getParameter("oldpassword");

        //使用Map集合存储返回给前端的数据
        Map<String,String> resultMap = new HashMap<String, String>();

        if (user==null){//session中的user对象失效了
            resultMap.put("result","sessionerror");
        }else if (StringUtils.isNullOrEmpty(oldpassword)){//输入的密码为空
            resultMap.put("result","error");
        }else {
            String userPassword = ((User)user).getUserPassword();
            if (userPassword.equals(oldpassword)){//输入的密码匹配
                resultMap.put("result","true");
            }else {//输入的密码不匹配
                resultMap.put("result","false");
            }
        }

        //将Map集合中的数据转为JSON格式传输给前端
        try {
            resp.setContentType("application/JSON");//设置返回数据是一个JSON，这样浏览器拿到这个数据之后就会按照JSON的数据格式来解析它
            PrintWriter writer = resp.getWriter();//获取输出流
            writer.write(JSONArray.toJSONString(resultMap));//使用阿里巴巴提供的一个JSON工具类，直接将其他数据格式的数据转为JSON数据格式，然后直接将其写出去
            writer.flush();//刷新缓冲区
            writer.close();//关闭资源
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

4.测试