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. about_debug-4.jpg

    JavaScript

    Android端末のデフォルト・ブラウザでJavaScriptのデバッグをする方法

    Webアプリをデザインするときに必須となるのがJavaScript…

  2. js_comment.jpg

    JavaScript

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

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

  3. js_style.jpg

    JavaScript

    CSSのプロパティをJavaScriptで指定する

    Elementオブジェクトのstyleプロパティでその要素に対し…

  4. scope.jpg

    JavaScript

    JavaScriptでは「変数のスコープ」を正しく理解してエラーを減らそう!

    変数の「スコープ」は正しく理解しないと、エラーにならないエラーが起…

  5. js_global.jpg

    JavaScript

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

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

  6. chrome_touchevents.jpg

    JavaScript

    WebアプリのデバッグをChromeでやるために「touch events」を有効化する方法

    Webアプリのデバッグは「Chrome」をいつも使ってます。その…

最近の記事

  1. 【無印良品】作り置きに欠かせない!バルブ付き密閉保存容器
  2. 【UNIQLO】冬のジム通いにブロックテックフリースパーカをお得に購入!!
  3. 【UNIQLO】冬のジム通いにブロックテックフリースパンツをお得に購入!!
  4. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!
  5. 便利すぎる!買ってよかったキッチンツール「キッチンペーパーハンガー」
  6. ジムで活躍!プロテイン用のボトルにおすすめ!「nalgene(ナルゲン)の沖倉商店コラボ・ボトル」
  7. コミックのイラストが新鮮だった!『MARVEL展』
  8. シンプルで使い易い!!「雷に強い マイクロタップ 4個口」
  9. ジム用に購入♪ リバーサル・オッシュマンズ別注「ドライスウェットショーツ」
  10. 暮しの手帖社とのコラボ作品!大きい面積が使いやすい!「日東紡の新しいふきん」

アーカイブ

  1. 留学

    イギリスから帰国
  2. 日常

    なるはやはダメ
  3. cosmology-2.jpg

    展覧会

    子供も楽しめる「ミッション[宇宙×芸術]」展に行ってきた
  4. 日常

    夏は夕方がいい
  5. 日常

    霧がかって、いい感じ
PAGE TOP