Ajax學習總結

我的演算法世界發表於2020-09-30

首先Ajax簡介：全稱Asynchronous JavaScript and XML,即非同步的JavaScript和XML。他不是一門程式語言，而是利用JavaScript在保證頁面不被重新整理，頁面連結不被改變的情況下雨伺服器交換資料並且更新網頁的技術。
之後介紹JQuery的一些簡單使用，一些Ajax的內建函式：
這裡我拿一個列子來進行分析：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="${pageContext.request.contextPath}/statics/js/jquery-3.5.1.js"></script>
    <script>
        function a1() {
            $.post({
                url:"${pageContext.request.contextPath}/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({
                url:"${pageContext.request.contextPath}/a3",
                data:{"pwd":$("#pwd").val()},
                success:function (data) {
                    if(data.toString()==="OK"){
                        $("#pwdInfo").css("color","green")
                    }else{
                        $("#pwdInfo").css("color","red")
                    }
                    $("#pwdInfo").html(data)
                }
            })
        }
    </script>
    <title>登入介面</title>
</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請求：
1.直接看上面的倆個函式function() a1和a2 內部的$符代表js的標誌，首先是提交post請求，然後是各種引數包括url,data,success…當然這三個是最重要的。
1)url:這個代表提交之後的訪問地址
2)data:代表一個鍵值對，提交到後臺的資料 其實我個人理解就是隱藏起來的url類似於這種localhost:8080/hello/a3?key=value這種的提交到請求域裡面，這樣後臺就可以根據name獲取到對應的value值，進而執行controller中的方法，將引數賦值給對應的引數。
3).第三個引數就是success就是執行成功的返回值，然後將response的資料賦值給data資料域，data代表的是請求提交的資料域，當response的時候同樣的也將後臺提交的資料返回給data也是key-value資料域，然後寫入html中提交前端介面 ，通過id.html()方法寫入data，進而在前端頁面顯示。

相關文章