application.js

$(document).ready(function () {

  $( "form" ).on( "click", function(event){
    event.preventDefault();
    var die=Math.floor(Math.random()*6)+1;
    var url=$('form').attr("action");
    $.post(url, die, function(){
      $('img').replaceWith("<img src=" + "'" die +".png'>");
    });
  });
});

index.erb

<div class="container">
  <h1>Simplest Possible AJAX</h1>
  <p>This contrived app will simulate a roll of a 6-sided die.</p>

  <form method="post" action="/rolls">
    <input type="submit" value="Roll the Die">
  </form>

  <div id="die">
    <% if @roll %>
      <img src="/<%= @roll.value %>.png" title="<%= @roll.value %>" alt="the roll">
      <% else %>
       <img src="5.png">
    <% end %>
  </div>

</div>