opamp_sando's blog

クソザコが割りと適当なことを書くためにある備忘録です。あとたまに普通の日記も書きます

PlayでJSONデータを受け取ったり渡したりと

Playで最近あるWebアプリを割りと頑張って作ってる。で、view側からJsonデータをPlayに渡す方法がググってもあんまり出なかったので受け取る方法も一緒にメモしてみる。

受け取り側

まず、受け取り側。例えば、viewから送られてきたJsonデータをそのままviewにまた送るようなActionを書いてみる。

Object Application extends Controller {

  def getjsondata = Action { implicit request =>
    println(request.body.asJson)
    Ok(Json.stringify(request.body.asJson.get))
  }

}

という感じ。ちなみに、サーバーコンソールにも受け取ったJsonデータを出力するようにした。 後は、view側からアクセスできるように適当にroutesファイルにも登録する。 例えばこんな感じ...

POST    /postjsondata     controllers.Application.getjsondata 

渡す側

ボタンが押されたらJsonデータを投げるようにしてみた。
今作ってるプロジェクトの一部を若干書き換えて貼ってるだけなので、なんでかpure使ってたりするのはご愛嬌。

<DOCTYPE html>  
<html>          
        <head>  
                <meta charset="utf-8">
                <title>POST JSON TEST</title>
                <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css">
                <script src="@routes.Assets.at("javascripts/jquery-2.0.3.min.js")" type="text/javascript"></script>
        </head>         
        <body>                  
                <p>JSONデータのPOST実験</p>
                <button id="testbutton" class="pure-button">TestButton</button>
                <div id="area"></div>
                <script type="text/javascript">
                        (function($){
                          $('#testbutton').click(function(){
                                var jsondata = { //送りたいJSONデータ
                                        "id": 1,
                                        "text": "hello world"
                                };
                                $.ajax({
                                          url:"@routes.Application.getjsondata",//先ほどのActionを指定
                                          type:'POST',
                                          data:JSON.stringify(jsondata),//JSON.stringifyを忘れない
                                          complete:function(result){
                                                $('#area').append(result.responseText);
                                          },
                                          dataType:'json',
                                          contentType:'text/json'
                            });
                          });
                        })(jQuery);
                </script>
        </body>
</html>

という感じ。

ブラウザ上のTestButtonを押してみて、{"id":1,"text":"helloworld"}というJSONデータがサーバーのコンソールとブラウザのボタン下に表示されたら成功。

参考ページ

http://stackoverflow.com/questions/16408867/send-post-json-with-ajax-and-play-framework-2

Firefox ブラウザ無料ダウンロード