javascript - 我想在不重新加载页面的情况下更改<audio>的值

Question

我将Rails 4和javascript用于个人Web应用程序。这是问题所在:
当我单击<audio>时，我想随机更改<button>的值。
为了生成<audio>的路径，我使用了ruby函数，该函数从数据库返回声音的值。我想做的就是单击<button>，每次我单击它时<audio>的更改值都不会重新加载页面。
这是示例:

<button> Click me!</button>
<audio><source src="<%= $soundpath %>"></audio>
/* I click on the button and the sound path into src="" should change everytime i click on the button without reloading the page*/
<audio><source src="<%= $soundpath %>" <--[this should be different from the previus one]></audio>

Answer 1

使用jquery的AJAX函数来请求一个URL，该URL将以文本响应以将src设置为:

在您的javascript文件中:

$("button").click(function() {
  $.get( "/sounds/next_source", function( data ) {
    $( "audio" ).attr( "src", data );
  });
}

然后，确保为此操作设置了路由，然后在 Controller 中实现它:

def next_source
    @src = Sound.last.url

  respond_to do |format|
    format.html {render :plain => @src }
  end
end