skillup

技術ブログ

UI

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

投稿日:

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

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

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

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

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

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

よくある実装

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

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

-UI
-,

執筆者:


comment

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

関連記事

no image

jQuery modalダイアログについて&重複時間処理

Contents1 jqueryモーダルダイアログ1.1 あらかじめ読み込むライブラリ1.2 ソース本体1.2.1 Html側1.2.2 Javascript側1.2.3 参考リンク2 重複時間につい …

no image

cakePHP+bootstrapでのページャー

cakePHP+bootstrapでページャーのリンクを下記のように出力したいときのメモを。 ソース コントローラーのほうでは特に設定する必要なはく、HTMLのほうで下記のように設定すればOKです。 …

no image

boostrapでのヘッダーナビ作成

昔から私の作るWEBアプリはデザインがめちゃくちゃなことが多かったんですが、最近は多少デザインにも気を配るようになってきました。 実はCSSがあまり得意ではなくて、うまく組むためにかなり苦戦していまし …

no image

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

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

no image

Bootstrapまとめ form+画像

前回に引き続きbootstrapネタについて。 Contents1 フォーム1.1 通常のinput1.2 項目名:入力欄の形式1.3 入力欄+ボタン(検索などでよくあるパターン)2 画像2.1 参考 …