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. JavaScript

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

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

  2. JavaScript

    JavaScriptでテキストボックスから値を取得する

    テキストボックスに入力された値を取得します。Elementオブジ…

  3. JavaScript

    「offset」と「style」で取得する値が違う

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

  4. JavaScript

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

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

  5. JavaScript

    【TweenMax】「onComplete」で引数を使う方法

    TweenMaxの「onComplete」で引数を使いたい場合って…

  6. JavaScript

    「TweenMax.js」をビジネス利用のためのライセンス購入方法

    いつもJavaScriptのアニメーション部分でお世話になってる「…

最近の記事

  1. ホワイトハウスコックスの財布
  2. 進撃の巨人展FINAL チラシ
  3. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  4. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  5. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  6. 【コレクション】カードダス:SDガンダム外伝シリーズ
  7. 懐かしい!!カードダスSD戦国伝!!

アーカイブ

  1. 日常

    7/27 セブン・シスターズからブライトンへ
  2. オトグラファー

    写真

    アーティストがGR DIGITALで撮影するとこうなる! 今でもお気に入りのプロ…
  3. アート

    「いけばな」ってほとんど「デザイン」だった!
  4. 無印良品

    【無印良品】冬になるといつも使ってます「湯たんぽ & 湯たんぽカバー」…
  5. 日常

    ながーい1日
PAGE TOP