JS GETパラメータ取得


 


URLについては、私たちの開発ではURLの一部の情報を抽出して異なることをする必要がある可能性があるため、実際にはバックエンドと対話する独特の方法でもあります.もちろん、これは安全であるに違いありません.要求が返されると、urlに関する情報はWindowオブジェクトのLocationオブジェクトに記録されます.値を取る結果は、ユーザーがアドレスバーの文字を手動で変更することによって変化しないことが重要です.これらの内容を理解したら、次の図から始めましょう.
 
画像の真ん中の長い文字列は完全なURLで、URLに含まれる可能性のある任意の部分が含まれています:プロトコル、ドメイン名、ポート番号(もちろん、多くの場合、私たちはウェブページを閲覧するときにポート番号を見ていません.彼は隠されているので、デフォルトは80ポートで、あなたは間違っていません)、パス、パラメータ、描画ポイントを追加します.JavaScriptで、この行の文字列を取得する方法はwindowにアクセスすることです.location.href、href属性にはページの完全なURLが含まれています.URLの一部の値を得るには、複雑で煩雑な正規表現でこの完全なURLを解析することができますが、locationの他の属性で取得するのが便利です.例えばlocationのprotocol属性にはコロン付きプロトコル名が記録されており、pathname属性にはhrefの分離であり、開発者に多くの便利さをもたらしているパス名が格納されている.次の表には、locationの下にあるすべてのプロパティと、それぞれに記録されている値が羅列されています.表の内容が理解できない場合、上記の図の色ブロックと文字は、各属性がURLに対応する位置をイメージ的に説明している.
属性値
href
完全なURL
protocol
プロトコル
hostname
ホスト名
host
ホスト名とポート番号
port
のポート番号
pathname
現在のURLのパス部分
search
URLの照会部分
hash
#開始アンカー
上記のプロパティはオプションで、JavaScriptで値を変更できることを示しています.これらの属性の大部分は一目瞭然で非常に簡単で、search部分だけが面倒で、search部分はGET方式でバックグラウンドのパラメータに伝わりますか?最初、&を区切り記号として、=付与値のシーケンス化文字列としてlocation.searchで得られた値は往々にして得たい最終結果ではないが,searchの構造によって解析すると,より得たい結果は明確な対応関係を含む関連配列である可能性がある.locationが必要ですsearchで得られた文字列をさらに処理する.
 
function getArgs() { 
  •     var args = {};

  •         var query = location.search.substring(1);
  •          // Get query string

  •     var pairs = query.split("&"); 
  •                     // Break at ampersand

  •      for(var i = 0; i < pairs.length; i++) {
  •             var pos = pairs[i].indexOf('=');

  •              // Look for "name=value"
  •             if (pos == -1) continue;

  •                     // If not found, skip
  •                 var argname = pairs[i].substring(0,pos);// Extract the name

  •                 var value = pairs[i].substring(pos+1);// Extract the value
  •                 value = decodeURIComponent(value);// Decode it, if needed

  •                 args[argname] = value;
  •                         // Store as a property

  •         }
  •     return args;// Return the object 

  •  }
    function getArgs() { 	var args = {};      	var query = location.search.substring(1);    	 // Get query string	var pairs = query.split("&");                 	// Break at ampersand	 for(var i = 0; i < pairs.length; i++) {          	var pos = pairs[i].indexOf('=');         	 // Look for "name=value"          	if (pos == -1) continue;                 	// If not found, skip          		var argname = pairs[i].substring(0,pos);// Extract the name          		var value = pairs[i].substring(pos+1);// Extract the value          		value = decodeURIComponent(value);// Decode it, if needed          		args[argname] = value;                    	// Store as a property      	}	return args;// Return the object  }

    上のコードは
    『JavaScript権威ガイド』の本の中にあります.getArgsメソッドはパラメータを受信せず,URLのsearch部分をアクティブに抽出して解析し,JSONを返す.たとえば、最初の画像のURLでは、getArgsメソッドを使用して次の結果が得られます.
     
    var search = {
  •     search:html

  • }
    var search = {	search:html}

    これにより、URLに関するすべての情報が非常に明確な結果を得ることができ、簡単です.
    ただし、正規表現を使用してURLを解析することをお勧めします.実行効率が高く、コードも簡潔です.
     
    function getArgs(){
  •     var args = {};

  •     var match = null;
  •     var search = decodeURIComponent(location.search.substring(1));

  •     var reg = /(?:([^&]+)=([^&]+))/g;
  •     while((match = reg.exec(search))!==null){

  •         args[match[1]] = match[2];
  •     }

  •     return args;
  • }.
  • function getArgs(){    var args = {};    var match = null;    var search = decodeURIComponent(location.search.substring(1));    var reg = /(?:([^&amp;]+)=([^&amp;]+))/g;    while((match = reg.exec(search))!==null){        args[match[1]] = match[2];    }    return args;}.