ajax初次實踐，為部落格增加點贊功能- 後端django

通過前面的學習，用ajax發送請求實作的點贊功能已經完成了

經過修改優化，配合layer架構，完成了點贊的功能。

效果

點過贊之後

第一次點贊會有來自提莫的肯定。

完整代碼

window.onload = function () {
            var btn =document.getElementById("support_btn");
            var test = window.location.href.split('/')[4];
            url1 = 'support' + test.toString();
            btn.onclick = function () {
                if (!localStorage.getItem(test)){
                   httpxml= $.ajax({
                    url: url1,
                    data: {
                    },
                    success: function (result) {
                        localStorage.setItem(test,true);
                       $("#likes_num").innerText=httpxml.responseText;
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 0,
                            shadeClose: true,
                            skin: 'user_layer',
                            content: '',
                            time:1200,
                    });
                    }
                });
                } else {
                   layer.msg('你已經點過贊了',{time: 1000});
                }
            }
        }
           

思路

如何記錄下點贊的資訊是點贊功能的一個難點。而 localStorage很好的解決了這個問題。

我的方法：

當第一次點贊時，記錄下文章id，即：id:true 這個鍵值對

這裡的test是我的文章id。

當然最重要的是判斷，這個判斷寫在ajax請求之前。

localStorage

localStorage 和 sessionStorage 屬性允許在浏覽器中存儲 key/value 對的資料。

localStorage 用于長久儲存整個網站的資料，儲存的資料沒有過期時間，直到手動去删除。

localStorage 屬性是隻讀的。

使用

儲存資料文法：

讀取資料文法：

最後吹一波layui

簡單好用又好看。