springMVC處理Ajax請求

　　最近在做畢設，剩一些小功能沒做，比如點贊、個人中心頁面、一些修改功能、登入成功或失敗的彈窗、註冊成功後的提示資訊；這麼一說還挺多沒做完的。不過還是點贊功能比較重要，畢竟後續有一個文章熱榜功能需要根據近期的點贊數對文章進行排序。沒有客戶端的點贊功能，總不能自己去資料庫了偷偷+1吧。

　　在我的系統裡用了SSM，前端用的Thymeleaf不是jsp。在傳參的過程中經常就不知道語法要怎麼寫。

　　說到點贊功能最先想到的就是用js實現，為啥呢，因為大一的時候學習html、css時看的視訊裡是有這個點贊功能的，記得視訊裡提過一嘴是用js實現的。巧就巧在，當時學html、css是為了完成課程作業，js我偏偏就沒學。後來學微信小程式開發的時候吧，用到了js，也沒多深入，現在過了兩年全忘了。不行咱就現學唄:

　　1.嘗試JavaScript

　　首先是在MDN學習一下，js語法和click事件

　　實際結果：

 　　執行結果：

　　在我的button元素裡沒有定義textContent，確實沒有啊。看看我的button

　　在Thymeleaf裡，要展示的值不是寫在標籤中間的如<button>${username}</button>而是<button th:text="${username}"></button>  這裡就是我最頭疼的問題，怎麼讓js獲取到我的引數，如果能拿到問題馬上能解決。

　　解決鳥。就是傳參的問題。怎麼在js中宣告一個我已經有的變數？

　　1.在controller中用@Controller宣告一個類為controller類

　　2.@RequestMapping註解接收請求

　　3.與資料庫互動得到結果後，用Model將資料封裝

　　4.在html頁面中用${變數名}獲取資料

　　5.在js中獲取變數的宣告格式為 var 變數名 = [[${變數名}]]

　　6.後續就是Ajax的問題了

　　附圖說明：

宣告controller

宣告處理方法（@RequestBody是我嘗試用別的方法實現點贊功能呢留下來的）

在頁面初始化的時候我就封裝了資料

<script th:inline="javascript">
        var
 
 nol = [[${nol}]];
        // var essayId = [[${essayId}]]
        const btn = document.getElementById("like");
        const xhr = new XMLHttpRequest();
        btn.addEventListener('click',function (){
            // console.log("123");
            xhr.open('POST','http://localhost:8080/DebateMIS/getNol?essayId='+ [[${essayId}]]);
            xhr.send();
            // console.log("sended");
            xhr.onreadystatechange = function (){
                if (xhr.readyState === 4){
                    // console.log("4");
                    // console.log(xhr.status);
                    if (xhr.status >= 200 && xhr.status <300){
                        nol = xhr.response;
                        console.log(nol);
                        btn.innerHTML=nol;
                    }
                }
            }
        })

    </script>

　　中間有些console是我還沒解決傳參問題時打的斷點。

　　這個b功能終於實現了！！！

　　在程式設計的過程中經常遇到了要實現一個功能不知道怎麼做的問題。或者像這樣子，知道要往什麼方向走，但是卻因為對語法不熟悉做不出來。打好基礎很重要啊。