[IMPORVE] userpage_get.html: 修改了用户操作生词时的响应方式

app/templates/userpage_get.html

@@ -69,10 +69,9 @@
                     (
                     <a title="{{ word }}">{{ freq }}</a>
                     )
-
-                    <a class="btn btn-success" href={{ username }}/{{ word }}/familiar role="button">熟悉</a>
-                    <a class="btn btn-warning" href={{ username }}/{{ word }}/unfamiliar role="button">不熟悉</a>
-                    <a class="btn btn-danger" href={{ username }}/{{ word }}/del role="button">删除</a>
+                    <a class="btn btn-success" onclick="updateWordFrequency(this,'{{username}}','{{word}}',-1)" role="button">熟悉</a>
+                    <a class="btn btn-warning" onclick="updateWordFrequency(this,'{{username}}','{{word}}',1)" role="button">不熟悉</a>
+                    <a class="btn btn-danger" onclick="deleteWord(this,'{{username}}','{{word}}')" role="button">删除</a>    
                 </p>
             {% else %}
                 <p class="new-word">
@@ -81,9 +80,9 @@
                     (
                     <a title="{{ word }}">{{ freq }}</a>
                     )
-                    <a class="btn btn-success" href={{ username }}/{{ word }}/familiar role="button">熟悉</a>
-                    <a class="btn btn-warning" href={{ username }}/{{ word }}/unfamiliar role="button">不熟悉</a>
-                    <a class="btn btn-danger" href={{ username }}/{{ word }}/del role="button">删除</a>
+                    <a class="btn btn-success" onclick="updateWordFrequency(this,'{{username}}','{{word}}',-1)" role="button">熟悉</a>
+                    <a class="btn btn-warning" onclick="updateWordFrequency(this,'{{username}}','{{word}}',1)" role="button">不熟悉</a>
+                    <a class="btn btn-danger" onclick="deleteWord(this,'{{username}}','{{word}}')" role="button">删除</a>
                 </p>
             {% endif %}
         {% else %}
@@ -98,6 +97,49 @@
         <script src="{{ js }}"></script>
     {% endfor %}
 {% endif %}
+
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script>
+        function updateWordFrequency(caller,username,word,difference) {
+            let type = difference<0?'familiar':'unfamiliar'
+
+            //后端更新数据
+            $.ajax({
+                method: 'get',
+                url: '/' + username + '/' + word + '/' + type,
+                async: true,
+                error: function(response) {
+                    alert('操作失败，稍后再试')
+                    location.reload()
+                    caller.scrollIntoView()
+                }
+            })
+
+            //前端更新页面
+            let par = $(caller).parent()
+            let freqEle = par.children().eq(1)
+            let newFreq = parseInt(freqEle.text()) + difference
+
+            if(newFreq <= 0) {
+                par.attr('hidden',true)
+            }
+            freqEle.text(newFreq)
+        }
+
+        function deleteWord(caller,username,word) {
+            $.ajax({
+                method: 'get',
+                url: '/' + username + '/' + word + '/del',
+                async: true,
+                error: function(response) {
+                    alert('操作失败，稍后再试')
+                    location.reload()
+                    caller.scrollIntoView()
+                }
+            })
+            $(caller).parent().attr('hidden',true)
+        }
+    </script>
 </body>
 <style>
     mark {