JavaScript

クエリーストリングを利用してWebページ間でデータを受け渡してみる

QueryString

「クエリーストリング」っていうのは以下のようなGoogleで検索した時に表示されるものをいいます。

1
https://www.google.co.jp/search?aq=f&sugexp=chrome,hogehoge...

「?」ではじまり「&」で区切って「キー=値」を並べたものです。
上の例ではこんな感じですね。
なにやら混乱しそうですが。。。

1
2
3
4
? //キーと値スタート
aq=f
&//区切り
sugexp=chrome

これを取り出すには例えば以下のようにします。

1
2
3
4
5
6
7
8
9
var query1 = window.location.search;
var qstr = query1.substr(1).split('&');
for(var i=0; i < qstr.length; i++){
    var qstr2 = qstr[i].split('=');
    if(qstr2[0] == 'aq'){
        data1 = qstr2[1];
        break;
        }
    }

これで「data1」に「f」が入りますね。
けっこう簡単にWebページ間でデータのやりとりってできるんですね〜。
この先なにか使うかも♪

でもいまのところ使う予定はないなあ^^;

▼基本がわかりやすかったです。

関連記事

  1. js_comment.jpg

    JavaScript

    JavaScriptでコメントは「/* */」をなるべく使わないようにしたい

    コメントには囲った部分をすべてコメントにする「/* */」と、1…

  2. tweenmax_js_totation.jpg

    JavaScript

    【TweenMax.js】回転アニメーションも楽々!

    以前も記事に書いたアニメーション用のJavaScriptライブラリ…

  3. js_global.jpg

    JavaScript

    JavaScriptでグローバル変数を減らす方法

    グローバル変数はいいことない!もしかしたら使っているライブラリー…

  4. offset_style.jpg

    JavaScript

    「offset」で取得した値を使い回す

    ちょっとはまったのでメモ。以下のように「offset」と「sty…

  5. trycatch.jpg

    JavaScript

    JavaScriptでエラーが起っても固まらないように「try-catch」する

    HTML5とJavaScriptでこねこねしてWebアプリを作って…

  6. data_access.jpg

    JavaScript

    JavaScriptでグローバル変数の使いどころを見直してパフォーマンスを改善する

    JavaScriptのコードの中では、どこにデータを格納するかでコ…

最近の記事

  1. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  2. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  3. 【コレクション】カードダス:SDガンダム外伝シリーズ
  4. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  5. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  6. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  7. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  8. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  9. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  10. コミックのイラストが新鮮だった!『MARVEL展』

アーカイブ

  1. 日常

    音→映像
  2. セミナー

    情報系の文化風土の現況とユビキタスGUI(グラフィカルユーザインターフェース)を…
  3. fits_slime1.PNG

    グルメ

    噛んだ後はスライムがあらわれる『Fit’s スライム味』
  4. 日常

    夏は夕方がいい
  5. ehon_100neko-1.jpg

    読書

    【絵本】大人ももう一度読みたい『100万回生きたねこ』
PAGE TOP