Sinatraにて、Ajaxでサーバーへデータをpost送信し戻り値(JSON)をJavaScriptで受け取って表示するやり方です。
##本体
main.rb
require 'sinatra'
require 'sinatra/reloader'
require 'json'
get '/' do
erb :index
end
post '/post' do
#ここで入力データを処理する
foo = params[:foo]
bar = params[:bar]
data = {
"foo" => foo,
"bar" => bar
}
content_type :json
@data = data.to_json
end
##ビュー
public/index.erb
<body>
<!--データ入力フォーム-->
<input type="text" id="foo">
<input type="text" id="bar">
<input id="submit" type="button" value="submit">
<p id="result"></p>
<!--jQuery召喚-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--submitボタンをおすと以下のAjax通信-->
<script type="text/javascript">
$(function(){
$("#submit").click(function(){
var foo = $("#foo").val();
var bar = $("#bar").val();
$.ajax({
type: "POST",
url: "/post",
dataType: "text", //dataTypeをちゃんと指定する
data: {
foo: foo,
bar: bar
},
//以下、コールバック関数で戻り値を受け取り、id="result"に表示
success: function(json) {
dataType: "json", //dataTypeをちゃんと指定する
$('#result').append(json);
},
error: function() {
$('#result').append('error');
}
});
});
});
</script>
</body>
##結果
####before
####[submit]をおすと
###できた！