閉じる
閉じる
×
jQueryのページ遷移にてGETでパラメータを渡す方法
2013-03-07 17:39
まず index.php を作成し、下記のように記載しておく。
この状態で、index.php にhttpアクセスする。
最初の画面にはGETパラメータの取得値は表示されない。
この状態で「東京」や「神奈川」をクリックすると、通常のjQueryとしてページが遷移するだけで
GETパラメータの引渡しは無い。
しかし
トップページ（index）にGETでパラメータを渡す
をクリックすると、index.php に対して、GETパラメータ
photo_size=kakudai
photo_id=1
が渡される。
そして、GETで取得した値として、
kakudai 1
がブラウザに表示される。
サンプルソース
https://tokyo-webs.jp/sample_source/130307a/
東京ウェブ制作
<?php
// isset判定を入れないと「Notice: Undefined index」と表示されるので注意。
$photo_size = ''; if(isset($_GET["photo_size"])){ $photo_size = $_GET["photo_size"]; }
$photo_id = ''; if(isset($_GET["photo_id"])){ $photo_id = $_GET["photo_id"]; }
// ヒアドキュメント
$htdocs=<<<EOD
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div data-role="page" id="index">
<p>GETで取得した値</p>
$photo_size
$photo_id
<hr>
<p>このページは index です。</p>
<p>このファイルのファイル名は index.php です。</p>
<p><a href="#tokyo">東京</a></p>
<p><a href="#kanagawa">神奈川</a></p>
<hr>
<p><a href="./index.php?photo_size=kakudai&photo_id=1">トップページ（index）にGETでパラメータを渡す</a></p>
</div>
<div data-role="page" id="tokyo">
<p>東京</p>
</div>
<div data-role="page" id="kanagawa">
<p>神奈川</p>
</div>
</body>
</html>
EOD;
echo $htdocs;
?>
この状態で、index.php にhttpアクセスする。
最初の画面にはGETパラメータの取得値は表示されない。
この状態で「東京」や「神奈川」をクリックすると、通常のjQueryとしてページが遷移するだけで
GETパラメータの引渡しは無い。
しかし
トップページ（index）にGETでパラメータを渡す
をクリックすると、index.php に対して、GETパラメータ
photo_size=kakudai
photo_id=1
が渡される。
そして、GETで取得した値として、
kakudai 1
がブラウザに表示される。
サンプルソース
https://tokyo-webs.jp/sample_source/130307a/
東京ウェブ制作
チャンネル会員ならもっと楽しめる！
- 会員限定の新着記事が読み放題！※1
- 動画や生放送などの追加コンテンツが見放題！※2
-
- ※1、入会月以降の記事が対象になります。
- ※2、チャンネルによって、見放題になるコンテンツは異なります。
東京ウェブ制作ブロマガ
更新頻度：
不定期
最終更新日：
チャンネル月額：
¥550
(税込)