jQuery Mobileで動的ページを表示するじぇ

jQuery Mobileのページ遷移はクセがあります。
基本的にaタグをクリックすると、Ajaxでリクエストを投げて、その結果を同じ画面上にDOMを追加してから画面を切り替えるようになっています。
そして、DOMの追加はリクエストのURLが異なると、その分だけ生成されるようになっています。
そのためGETリクエストの場合、パラメータを含まれる場合、URLがhttp://・・・?param=○○のようになるため、違うページとしてDOMが生成されます。

少しでもDOMの生成を抑えたい場合は、POSTリクエストにすると良いです。
POSTならパラメータの内容に関わらず、URLは同じなので。
formタグに、methodを指定していないと内部的に呼び出される$.mobile.changePage関数はgetでリクエストを送ってしまうとドキュメントに書いてありました。
指定がないときはpostにしてよ・・・。

ってことで、aタグでパラメータを変えないといけない場合は、javascriptを経由してPOSTリクエストを送るようにしたほうがDOMの数を抑えられます。

<div data-role="page" id="top">

  <div data-role="header">
    <h1>トップページ</h1>
  </div>

  <div data-role="content">
    <script type="text/javascript">
    function switchPage(param) {
      $.mobile.changePage({
        url: 'Dynamic.jsp',
        type: 'post',
        data: 'param=' + param
      }, 'slide', false, true);
    }
    </script>
    <p><a href="#" onclick="switchPage(1)">データ1</a></p>
    <p><a href="#" onclick="switchPage(2)">データ2</a></p>
    <p><a href="#" onclick="switchPage(3)">データ3</a></p>
  </div>

</div>