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" 的内容。目前，它仅在我们刷新页面时有效，但我们希望它使用 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"？

如能提供帮助，非常感谢。

更新：

这是存储内容的演示。

播放列表数据存储方式：

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 key调用"playlist":

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 );
    }

在那里的某个地方，我们还想计算 localStorage 中的项目数，"playlist" 键，并使用 ajax.

更新计数

这里是计算播放列表中歌曲数量的跨度HTML：

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

唯一一次调用脚本是在我们刷新页面时。我们希望在单击删除按钮时调用 countSongs 脚本，并使用 ajax.

更新该范围内的计数

Answer 1

我是通过使用 jquery .load() 函数而不是直接使用 ajax 来解决的。

完成此操作需要 3 个文件。

显示页面的实际 HTML 文档 (page-listen.php)
包含我所有 jPlayer js 函数的 javascript 文件 (demo.js)
将运行用.load()加载的代码的html文件(countthesongs.html)

我会 post 每个文档的重要部分，并附上评论。

page-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 个文档，这是正在发生的事情：

用户通过单击删除从播放列表中删除了一首歌曲按钮。
从播放列表中删除项目的函数被触发，它将新的项目数量存储到localStorage (updatePlaylist()) , 然后计算新数字并将其打印到页面上的容器中 (countTheSongs()).

使用 .load() 函数，我们可以在用户删除项目时显示播放列表中的歌曲数量，而无需重新加载页面，就像我们使用 ajax.

希望这对某人有所帮助。对不起，如果有点混乱。

Jquery AJAX - 单击此按钮时更新文本范围

Jquery AJAX - Update span of text when this button is clicked

javascript

ajax

jquery

jplayer