質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.62%

Java WEBアプリケーションでのレスポンスの取得方法

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 1,221

allazward

score 9

前提・実現したいこと

現在Play Framework 2.56(Java)を使用して
WEBアプリケーションを作成しています。
作成するページとおおまかな流れは、トップ画面に一覧があり、(検索結果を初期表示する)
詳細ボタンを押下して次ページで詳細情報を表示するといった単純なものです。
(シングルページではありません)

具体的には画面初期表示時にサーバー側でデータベースからデータを取得して
そのデータをjson形式に整形、クライアントに返し
受け取ったデータをクライアントで
vue.js(他のフレームワークも検討中)を使用してデータバインド、
画面に表示しようとしています。
その際、サーバー側で下記のコードの様にして初期表示画面の指定、また展開したいデータを
指定しているのですが画面でのjsonデータの取得方法がわかりません。
playには画面側に用意されているものとしてscala.html
があるのですがその機能は使用せずjavascriptでサーバーからわたってきたデータを
展開したいと考えています。
下記コードでレスポンスを返す場合、jsonを一緒に返し
javascriptで取得、バインドすることは出来ないのでしょうか。

もし上記のような事が出来ないのであれば
検索実行などを行わず、まず画面を初期表示し、
その後ajaxで通信し、データを検索、vue.jsでバインドする、
などのような手順も検討しています。
その選択肢をとった場合に一覧画面でボタンを押下した際、
指定画面へjsonを返し画面で受け取る事が出来ないのであれば
一旦、詳細画面を表示、その際検索条件となる値を遷移先画面に渡して
その画面でajaxを使用してデータを特定、取得といった手順しか
思いつきませんでした。
もし他にも良い方法があるようでしたら教えてください。
私としては最初に記載した方法で実装できることを期待しています。
よろしくお願い致します。

発生している問題・エラーメッセージ

エラーメッセージ等はありません

エラーメッセージ

該当のソースコード

public class Administrate extends Controller {
public Result index() {
AdministrateService aService = new AdministrateService();
//データ検索(getInitialDataはjsonデータを返却します)
return ok(views.html.index.render(aService.getInitialData())); 
}

試したこと

補足情報(言語/FW/ツール等のバージョンなど)

Java 1.8
Play Framework 2.56
vue.js 1.x または Angular 1.x

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/07/29 11:11

    コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

    キャンセル

回答 2

checkベストアンサー

0

まず画面を初期表示し、その後ajaxで通信し、データを検索、vue.jsでバインドする

こうなると思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/29 11:01

    root_jp様、ありがとうございます。
    思いついたもののこのやり方に抵抗がありました。
    これは一般的なやり方でしょうか。(scalaを使用しない選択肢が一般的でないかもしれませんが)
    私としてはバックエンドの技術が変わった場合(java⇒rubyなど)
    画面だけをそのまま変更せず残せるようにしたいと考えています。

    上述のコード6行目、
    OK()の引数はレスポンスとして画面に渡されるわけではないのでしょうか。
    この辺をまだ理解できていません。
    レスポンスヘッダに追加も考えたのですが、容量制限があり
    また上述のコードではレスポンスボディには含まれていませんでした。

    このケースにおいて、回答頂いた
    『遷移先画面を表示⇒遷移もと画面からパラメータを受け取る⇒遷移先画面からajax通信』の方法以外で他に思いつくことがあれば教えて頂けないでしょうか。

    キャンセル

  • 2016/07/29 13:38

    なぜ抵抗があるんですか?一般的だと思います。
    このやり方は、バックエンドは関係ないので画面だけそのまま残せると思いますよ。
    AjaxのリクエストURLが同じように作れればですけど。

    すみません、Playのことは良く分からないのですが、
    OKメソッドがレスポンスを返すものであるならば、返っていると思いますよ。
    これだと、ブラウザにHTMLではなくJSONのデータがそのまま表示されそうです。

    サーバーサイドとクライアントサイドがごっちゃになっている気がしますね。
    レスポンスはブラウザが受けるものです。
    JavaScriptは関係ありません。

    ブラウザへのレスポンスが、Content-Type がHTMLで、
    そのHTMLの内容にJavaScriptが含まれているのであれば、
    書かれている順に上から下に実行するに過ぎません。

    ところが、今はレスポンスにJSONを返しているので、
    JavaScriptすらも実行されていないと思います。

    そのJSONのレスポンスをJavaScriptで受けたければ
    Ajaxでそのコントローラにリクエストします。

    どうしてもこれが嫌なのであれば、JSONを画面の情報として渡して
    結果をHTMLに埋め込む。
    JavaScriptのonloadイベントで、そのJSONを参照する形にすることです。
    これは、yubaさんの言っていることになのではないでしょうか?
    scala.html というのを使いたければ使えばいいし、
    使いたくなければ使わなければいいだけのことです。

    Play分からないので適当に書きますが、
    <script>
    var data = request.get("json");
    // data にはサーバーサイドで生成したJSONが入っているので、あとは使うのみ。
    </script>

    とか

    <span style="display: none;" id="json">request.get("json")</span>
    としてHTMLの隠し項目として出力しておき、
    onloadのJavaScriptでこの値を取得する。

    var data = document.querySelector("#json").innerText;
    あとはdataを使うのみ。

    キャンセル

  • 2016/07/30 13:58

    root_jp様、
    ご返答ありがとうございます。
    『抵抗がある』と感じたのは単純に私が
    そのような実装の経験が無かったからだと思います
    まだ結論はでていませんが
    検索キーとなるパラメータを渡す方向で進めたいと思います。
    色々とありがとうございました。

    キャンセル

0

Ajaxでないなら、JavaScriptがJSONデータを受け取るには、HTML文書内に

var data = 'データJSON';


という記述が入っているようにすることになります。
この「データJSON」の埋め込みをscala.htmlにやらせます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/07/29 10:36

    yuba様、
    ご回答ありがとうございます。
    仰られているのは、
    ページ冒頭で@(jsontxt: String)
    var data = @jsontxt;のように渡すと言うことでしょか。
    意図としては画面周りはscala.htmlを使用せず、
    htmlとjavascriptだけで実現したいと
    考えています。
    ・・・と言うのは不可能でしょうか。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる