application.js

$(document).ready(function () {

  $('form').submit( function(e) {
    e.preventDefault();

    var value = Math.floor(Math.random() * 6 + 1);
    console.log('the client side value was: ' + value);

    var request = $.ajax({
      url: this.action,
      type: this.method,
      data: { value: value }
    });

    request.done( function(data) {
      var die = $('#die img');
      die.attr('src', '/' + data + '.png');
      die.attr('title', data);
      $('#die').show();
    });
    
  });

});

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" style='display: none'>
    <img alt="the roll">
  </div>

</div>

index.rb

get '/' do
  erb :index
end

post '/rolls' do
  params[:value]
end