Ajax---狂神說

Ajax

AjAX=Asynchronous javaScript and XML(異步的javaScript和XML)。

Ajax不是一種新的編程語言，而是一種用於創建更好更快以及交互性更強的Web應用程序的技術

C/S

增加B/S的體驗性

B/S：未來的主流，並且會爆發式的持續增長；

H5+網頁+客戶端+手機端

使用JQuery需要先導入jQuery的js文件；

Copy@Controller
@RequestMapping("/ajax")
public class AjaxController{
    //第一種方式，服務器要返回一個字符串，直接使用response
    @RequestMapping("/a1")
    public void ajax(String name,HttpServletResponse response){
        if("admin".equals(name)){
            response.getWriter().print("true");
       }else{
            response.getWriter().print("false");
       }
   }
}

@RequestMapping("/a2")
@ResponseBody
public List<User> ajax2(){
    List<User> list =new ArrayList<>();
    User user1 =new User("豪",1,"男");
    User user2=new User("豪",1,"男");
    list.add(user1);
    list.add(user2);
    return list; //由於加了@ResponseBody注解，他會返回一個字符串
}

ajax 寫法

Copy<script type="text/javascript">
    function a1() {
        //所有參數：
        //url:待載入頁面的URL地址，Json
        //data:待發送Key/value參數
        //success:載入成功時回調函數
        //data：封裝了服務器返回的數據
        //status：狀態
        $.ajax({
            url:"${pageContext.request.contextPath}/ajax/a1",
            data:{"name":$("txtName").val()},
            success:function (data,status) {
                console.log(data)
                console.log(status)
           }
       });
        //將文本輸入的值，
        $("txtName").val();
        // //發送給服務器，
        // //接受服務器返回的數據
   }
Copy<script>
    $(function(){
    $("#btn").click(function(){
            $.post("${pageContest.request.contextPath}/ajax/a2",function(data){
                console.log(data);
                var html="";
                for(var i=0;i<data.length;i++){
                    html+="<tr>"+
                        "<td>"+data[i].name+"</td>"+
                        "<td>"+data[i].age+"</td>"+
                        "<td>"+data[i].sex+"</td>"+
                        "</tr>"
               }
                $("#content").html(html);
           })
       })
})
</script>

第三種#

Copy@RequestMapping("/a3")
@ResponseBody
public String ajax3(String name,String pwd){
    String msg="";
    if(name!=null){
        if("admin".equals(name)){
            msg="ok";
       }else{
            msg="用戶名有誤"；
       }
   }
    if(pwd != null){
        if("123456".equals(pwd)){
            msg="ok";
       }else{
            msg="密碼輸入有誤";
       }
            
   }
    return msg;
}
Copy<html>
    <head>
        <title>Title</title>
        <script>
            function a1(){
                $.post({
                    url:"${pageContext.request.contextPath}/ajax/a3",
                    data:{"name":$("#name").val()},
                    success:function(data){
                        if(data.toString()=='ok'){
                            //信息核對成功
                            $('#userInfo').css("color","green");
                       }else{
                            $("#userInfo").css("color","red");
                       }
                        $("#userInfo").html(data);
                   }
               })
           }
            function a2(){
                $.post("${pageContext.request.contextPath}/ajax/a3",{"pwd":$("pwd").val()},function(data){
                    if(data.toString()='ok'){//信息核對成功
                        $('#pwdInfo').css("color","green");                     
                   }else{
                        $('#pwdInfo').css("color","red");
                   }
                    $("#pwdInfo").html(data);
               })
           }
        </script>
    </head>
    <body>
        <p>
            用戶名：
            <input type="text" id="name" onblur="a1()"/>
            <span id="userInfo"></span>
        </p>
        <p>
            密碼：
        <input type="text" id="pwd" onblur="a2()"/>
        <span id="pwdInfo"></span>
            
        </p>   
        
    </body>
</html>

Ajax 總結：

使用jQuery需要導入JQuery，使用Vue就導入Vue，兩個都用，自己原生態實現

三步曲：

1.編寫對應處理的Controller,返回消息或者字符串匯總json格式的數據

2.編寫ajax請求

1.url: Controller 請求

2.data：鍵值對

3 . SUCCESS: 回調函數

3.給Ajax綁定事件，點擊click，失去焦點onblur,鍵盤彈起keyup

狂神說Java【SMBMS】——SMBMS超市訂單管理系統(五) ——使用Ajax優化密碼修改功能

在前面的密碼修改中，我們避開使用了前端素材中驗證舊密碼的Ajax功能，是因為要把Ajax單獨拿出來講

前面實現的密碼修改功能是直接輸入兩遍新密碼進行的修改，這顯然是不安全的，所以我們應該在修改密碼的時候加入驗證舊密碼的操作，而這個操作根據前端素材就需要使用到Ajax了

1.什么是Ajax

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）
AJAX 不是新的編程語言，而是一種使用現有標准的新方法
AJAX 是在不重新加載整個頁面的情況下，與服務器交換數據並更新部分網頁的藝術
- 通過在后台與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新
- 這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新
傳統的網頁（不使用 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刪除。

猜您在找 狂神說SpringBoot 狂神說HTML筆記狂神說Springboot筆記 JavaScript筆記（狂神說） Vue筆記（狂神說） MySQL筆記【狂神說】狂神說redis筆記（三） Spring的狂神說筆記 SpringMVC的狂神說筆記 ElasticSearch筆記（狂神說）