Question

我一直试图弄清楚如何在这个简单的函数中使用ajax。

我有一个跨度，显示用户在播放列表中的歌曲数量。它只是显示了localStorage密钥中存在多少个值。

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

我们正在使用jPlayer，我们设置了一个播放列表。当您从播放列表中删除歌曲时（通过单击删除按钮），我们希望使用新计数更新该div的内容，＆＃34; count-songs-span＆＃34;。目前，它仅在我们刷新页面时有效，但我们希望使用ajax进行更新。

我们在此处为删除按钮添加了点击事件：

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

updatePlaylist（）如下：

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

click事件将列表保存到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更新＆＃34; count-songs-span＆＃34;？

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

更新

以下是存储内容的演示。

存储播放列表数据的方法：

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键称为＆＃34;播放列表＆＃34;：

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中的项目数量，＆＃34;播放列表＆＃34;键，并使用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 ）

我会发表每篇文章的重要部分，并附上评论。

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>

所以为了理解这三个文件，这就是正在发生的事情：

用户通过单击删除从播放列表中删除歌曲按钮。
将触发从播放列表中删除项目的功能，该功能会将新项目数存储到localStorage（ updatePlaylist（）），然后计算并打印该新编号它是页面上的容器（ countTheSongs（））。

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

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

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

1 个答案: