skillup

技術ブログ

UI

検索ページの遷移に関して

投稿日:

検索ページの遷移に関してメモ。

基礎だが実際全部完全に網羅できているかというと不安な部分が多い。

基本仕様: 以下のようなページ構成を想定

  • 1ページ目は検索エリアと一覧が同時にでる
  • 一覧情報からはリンクで詳細画面に移動できる
  • ページャ―は1ページあたりいくつのリンク形式(インフィニティスクロールではない)

想定しないといけない遷移状態

  • 詳細ページから戻った時の検索状態の検索&ページャーの保存
  • 戻るのは戻るボタン&history.back
  • ページャーで1ページ目に移ったときに検索情報が保存されているか
  • パンや別リンクなどでうつったときにセッションやページャーがクリアされているか

よくある実装

  • 検索情報はGETで送り、セッションに保存する
  • 2ページ目以降はページ番号をGETで送り、検索情報はセッションで引き回す ※検索も含めてhiddenなどにいれて全てGETで回すということをすることもあり
  • 再検索された場合や、パンくずやリンクなどの場合、セッションを消す(ココが忘れやすいので注意)
  • リクエスト句(この場合GET)はセッションに常に優先する
  • 会員サイトなどだとPOSTで送信する分、historyback対策がやや大変。すべてsessionからデータを引っ張ってくる

特にhistoryback対策が大変です・・・

-UI
-,

執筆者:


comment

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

関連記事

no image

HTML&JSなど画面まわり&サーブレット小ネタ

サーブレットでアプリ作ってますが、画面まわりに関していろいろいじっているのでそこら辺のネタなんかを。 Contents1 テーブルの結合2 JSPでの動的HTML→POSTで認識できない3 動的プルダ …

no image

Seleniumの値基本動作まとめ

以前、「Seleniumでの画面テスト」というエントリーでのテストフレームワークとして、Seleniumを紹介しました。 上記のエントリーですが、単なるインストールと基本的な起動、簡単な文字入力ぐらい …

no image

情報アーキテクチャの分類

今回は情報の分類に関して。 ようはソフトウェア上に情報をどのように配置するかということについてです。 参考書では情報を大きく4つに分けています。 Contents1 オブジェクトのリスト2 アクション …

no image

AngularJS テーブル行のソート入れ替え&ドラック&ドロップ

受注伝票みたいなものを作ると伝票の登録画面はヘッダーと明細に分かれますね。 私が携わったプロジェクトでは、大体一画面でヘッダー情報と明細情報を入力することが一般的でした。 今回AngularJSでその …

no image

Angularモジュール間の読み込み

Angularで以前こちらで、複数のコントロールに分ける方法を書きましたが、コントローラーだけでなく、Factory,ServiceなどいろいろなタイプのサービスがAngularにはあります。 プログ …