首页 > 编程语言 > 详细

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

时间:2020-09-09 21:47:40      阅读:1324      评论:0      收藏:0      [点我收藏+]

? 在前面的密码修改中,我们避开使用了前端素材中验证旧密码的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.测试

技术分享图片
技术分享图片
技术分享图片
技术分享图片
技术分享图片

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

原文:https://www.cnblogs.com/thhh/p/13641560.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!