狂神說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.測試






免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM