Jquery AJAX - 單擊此按鈕時更新文本的範圍

Question

我一直在試圖弄清楚如何在這個簡單的函數中使用ajax。

我有一個跨度顯示用戶在其播放列表中有多少首歌曲。它只是顯示localStorage密鑰內存在多少個值。

<span id="count-songs-span"> 
    <script> 
     var countSongs = JSON.parse(localStorage.playlist).length; 
     document.write(countSongs); 
    </script> 
</span> 

我們使用jPlayer，我們有一個播放列表設置。當您從播放列表中刪除歌曲（通過單擊刪除按鈕）時，我們希望用新的記數更新該「div-count-songs-span」的div內容。目前，它只在刷新頁面時才起作用，但我們希望使用ajax進行更新。

我們增加了一個點擊事件刪除按鈕的位置：

$('.jp-playlist').on('click', '.jp-playlist-item-remove', function(){ 
    window.setTimeout(updatePlaylist, 500); 
}); 

updatePlaylist（）如下：

function updatePlaylist(){ 
     playlist = myPlaylist.playlist; 
     storage.set('playlist', playlist); 
    } 

的單擊事件保存列表localStorage的，這很好。但在此之前，我們想用ajax更新countSongs變量。

我從另一個網站上看到了這個代碼片段，並且試圖將它適應到我的網站，但是我無法讓它正常工作。這只是我的網站的正確的代碼。

$.ajax({ 
      type : "get", 
      dataType : "json", 
      url : ajax_object.ajaxurl, 
      data : {action: "get_media", id : id}, 
      success: function(obj) { 
       if(obj.length == 1){ 
       player.add(obj[0], true); 
       updatePlaylist(); 
       }else if(obj.length > 1){ 
       player.setPlaylist(obj); 
       player.play(0); 
       updatePlaylist(); 
       } 
      } 
     }); 

任何人都可以幫助我使用ajax來更新「count-songs-span」嗎？

非常感謝，如果你可以幫忙。

---

UPDATE：

這裏是存儲什麼的演示。

存儲播放列表數據的方法：

function updatePlaylist(){ 
     playlist = myPlaylist.playlist; 
     storage.set('playlist', playlist); 
    } 

任何地方，我們需要存儲的播放列表信息，我們稱之爲方法 - updatePlaylist（）

這是被存儲什麼是一個例子：

[{"title":"Mauvais Temps","artist":"Right Beat Radio","mp3":"/mp3s/MauvaisTemps.mp3"},{"title":"Line Steppers","artist":"Right Beat Radio","mp3":"/mp3s/LineSteppers.mp3"},{"title":"Try My Best","artist":"Right Beat Radio","mp3":"/mp3s/TryMyBest.mp3"},{"title":"San Ignacio","artist":"Right Beat Radio","mp3":"/mp3s/SanIgnacio.mp3"}] 

所以，當我們要計算在播放列表中的歌曲數量，我們使用這個（在localStorage的密鑰被稱爲「播放列表」：

var countSongs = JSON.parse(localStorage.playlist).length; 
document.write(countSongs); 

---

更新＃2：

截圖：

https://rightbeatradio.com/wp-content/uploads/2015/09/Screen-Shot-2015-09-07-at-9.13.34-AM.png

希望這個截圖會有所幫助。您可以在那裏看到播放列表，在上面可以看到當前列表中的歌曲數量（7首歌曲）。

除了名單上的每首歌曲，有一個刪除（X）按鈕。此按鈕允許用戶從列表中刪除歌曲。

當點擊該按鈕，這些功能火：

//Remove Item from Playlist 
    $('.jp-playlist').on('click', '.jp-playlist-item-remove', function(){ 
     window.setTimeout(updatePlaylist, 500); 
    }); 

// update playlist 
    function updatePlaylist(){ 
     playlist = myPlaylist.playlist; 
     storage.set('playlist', playlist); 
    } 

某處在那裏，我們想也算項目在本地存儲，「播放」鍵的數量，並通過更新計數阿賈克斯。

下面是計算在播放列表中的歌曲數量跨度的HTML：

<span id="count-songs-span"> 
    <script> 
    var countSongs = JSON.parse(localStorage.playlist).length; 
    document.write(countSongs); 
    </script> 
</span> 

該腳本被調用的唯一情況是，當我們刷新頁面。我們希望在單擊remove按鈕時調用countSongs腳本，並使用ajax更新該範圍內的計數。

Answer 1

我計算出來通過使用jQuery .load（）函數，而不是直接使用AJAX。

它需要3個文件，以實現這一目標。

1. 顯示的頁面中的實際HTML文檔（頁面listen.php）
2. ，裏面所有的我jPlayer JS功能（demo.js）
3. HTML文檔的JavaScript文件將運行加載有.load（）（countthesongs.html）

我會後每個文件的重要部分的代碼，與同事mments。

---

頁listen.php（這跨度將作爲將要顯示的是當前在用戶播放列表中的歌曲的數量的容器。）

<span id="count-songs-span"> 
    <script> 
    var countSongs = JSON.parse(localStorage.playlist).length; // count the number of songs that are stored in localStorage key "playlist". 
    document.write(countSongs); // print the number of songs 
    </script> 
</span> 

當頁是第一顯示時，播放列表中的歌曲數量將被計算並顯​​示給名爲「count-songs-span」的跨度內的用戶。

---

demo.js（這些是做繁重的jPlayer功能。）

// Function to store the playlist in LocalStorage 
    function updatePlaylist() { 
     playlist = myPlaylist.playlist; // define playlist variable 
     storage.set('playlist', playlist); // store the playlist in localStorage as "playlist" 
    } 

    // Function to count the number of songs and print to the container 
    function countTheSongs() { 
    $("#count-songs-span").load("/js/jPlayer/countthesongs.html", function() { 
     var theDiv = document.getElementById('count-songs-span'); // Assign the count-songs-span container we discussed earlier to a variable called theDiv 
     theDiv.innerHTML = theDiv.innerHTML + countSongs; // Print the results of countthesongs.html using jquery .load() function 
     }); 
    } 

    // Function to remove an item from playlist 
    $('.jp-playlist').on('click', '.jp-playlist-item-remove', function(){ 
     window.setTimeout(updatePlaylist, 500); // Store the playlist in localStorage with new number of songs, on a delay 
     window.setTimeout(countTheSongs, 550); // Display the number of songs in the count-songs-span container 
    }); 

---

countthesongs.html（這是運行HTML文件簡短的腳本來計算播放列表中的歌曲數量。）

<script> 
    var countSongs = JSON.parse(localStorage.playlist).length; 
</script> 

---

因此，爲了使這些3個文件的意義，這裏發生的事情：

1. 用戶通過點擊刪除按鈕 刪除從播放列表中的歌曲。
2. 的功能，從播放列表中刪除項目被觸發，存儲項目，以localStorage的新號碼（updatePlaylist（）），然後計數，並打印新的號碼它的容器在頁面上（countTheSongs（ ））。

使用.load（）函數，我們可以在用戶刪除項目時顯示播放列表中的歌曲數量，而無需重新加載頁面，就像我們使用ajax一樣。

希望這可以幫助別人。對不起，如果有點混亂。