前提・実現したいこと
sinatra使用です。
inputからpostでAjax通信したデータをサーバー処理してjavascriptに戻したいのですが、うまくいきません。
また、サーバーから戻したjsonデータをjavascriptnに変数として持たせたいのですが、その記述はどこに書けば良いでしょうか？
発生している問題・エラーメッセージ
indexのconsoleで、サーバーエラーのメッセージが出てきます。
POST https:~~~~/post 500 (Internal Server Error)
send @ jquery.min.js:4
ajax @ jquery.min.js:4
(anonymous) @ (index):21
dispatch @ jquery.min.js:3
r.handle @ jquery.min.js:3該当のソースコード
main.rb
require 'sinatra'
require 'sinatra/reloader'
require 'json'
get '/' do
erb :index
end
post '/post' do
#ここで入力データを処理する予定
@data = {
foo: params[:foo],
bar: params[:bar]
}
end
get '/post/res' do
#jsonデータで返す
content_type :json
@data.to_json
end
index.erb
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<h1>test</h1>
<input type="text" id="foo">
<input type="text" id="bar">
<input id="submit" type="button" value="submit">
<div id="result">
</div>
<script type="text/javascript">
$(function(){
$("#submit").click(function(){
var foo = $("#foo").val();
var bar = $("#bar").val();
var request = $.ajax({
type: "POST",
url: "/post",
dataType: "text",
data: {
foo: foo,
bar: bar
}
});
request.done(function(msg){
console.log(this);
$.ajax({
type: "GET",
url: "/post/res"
})
.done(function( res ){
$("#result").prepend( res.foo + ' and ' + res.bar);
});
});
});
});
</script>
</body>-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
check解決した方法
+1
コールバック関数を使うこと、postデータと返却値にちゃんとdataType指定してあげることでとりあえずできました。
main.rb
require 'sinatra'
require 'sinatra/reloader'
require 'json'
get '/' do
erb :index
end
get '/post' 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
index.erb
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<h1>test</h1>
<input type="text" id="foo">
<input type="text" id="bar">
<input id="submit" type="button" value="submit">
<div id="result">
</div>
<script type="text/javascript">
$(function(){
$("#submit").click(function(){
var foo = $("#foo").val();
var bar = $("#bar").val();
var request = $.ajax({
type: "POST",
url: "/post",
dataType: "text",
data: {
foo: foo,
bar: bar
},
success: function(json) {
dataType: "json",
$('#result').append(json);
},
error: function() {
$('#result').append('error');
}
});
});
});
</script>
</body>変数格納についてはまた調べて別途チャレンジします。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.19%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる