JavascriptでHTMLを操作して画面遷移する方法(Java編)

この記事は

Javadcriptで画面遷移させるコードを紹介しています。

コード紹介

Javascriptを書いて動くAPIやサーバーサイドのコントローラーへ送るリクエストをJavascriptで書きたいときに使える方法について書いています。

言語:Java
フレームワーク:Spring Boot

ソースコード例

以下がソースコード例となります。

  • 画面遷移用コントローラー
  • 画面遷移を行うサーバー側のソースコードです。
    遷移元:home.html
    遷移先:helloworld.html

  • 遷移先画面
  • 画面遷移後は”helo world!”と表示されます。

  • 遷移元画面
  • JavaScriptで書く画面遷移方法を2種類ご紹介します。1つ目はHTML側にidを仕込みJavaScriptでそのidの部分に対する処理を書く方法。2つ目はHTML側にonclickを仕込みJavaScriptの関数を直接呼び出す方法です。それぞれform1、form2として以下のコードに書いています。処理内容としては両方とも全く同じです。

    通常クライアント側(HTML)からサーバー側(プログラム側)へリクエストを送る際は、inputタグのtype=”submit”やtype=”button”、またはbuttonタグを使用します。しかしその実装では露骨に画面遷移用のボタンが表示されてしまいます。今回はこのボタンを表示させずにaタグとspanタグを用いて画面遷移を行っています。以下に詳細を書いておきます。

    まずformタグの準備としては、formタグの中に後々JavaScript側で読み込む用にnameを仕込んでおきます。次にform1ではaタグにid=”(任意のid)”を、form2ではspanタグの中にonclick=”(JavaScriptの関数名)”を仕込みます。HTML側の仕込みとしてはこれだけです。

    まずはform1の以下の部分についてです。
    (任意のid).addEventLinstener(‘click’,()=>{処理内容});
    ほとんどJavaScriptでは定型の書き方で、このように書くことで、(任意のid)に対して行う処理を実装します。

    これがform2だと関数名”button_click”の関数として書いています。書き方は以下の通りです。
    function (任意の関数名){処理内容};
    となります。

    そしてそれぞれの処理内容の部分は全く同じであり
    document.forms.(formの中に仕込んだname).submit();
    となります。この部分formタグの中にあるnameが一致するものを探し出し、submitするという指示文です。これにより画面遷移を実現しています。

    わざわざJavascriptで書く理由

    HTMLだけで済む実装をわざわざJavascriptで書く理由ですが、APIなどJavascriptで書かれたものに対してその中に画面遷移のリンクやボタンがある場合などに使用します。

    まとめ

    フロントエンドとバックエンド両方を使うエンジニアなら必要になってくるテクニックです。今回は画面遷移のみのソースですが、画面遷移とJavaScriptとJavaを用いて複雑な処理を行う時に重宝されます。なかなか幅広く使えるので知っておいて損はないです。

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    CAPTCHA