ホームページ > ウェブフロントエンド > jsチュートリアル > URL 解析クエリパラメータの JavaScript コードの説明

URL 解析クエリパラメータの JavaScript コードの説明

巴扎黑
リリース: 2017-08-08 09:58:51
オリジナル
1497 人が閲覧しました

この記事では、簡単なコードを通じて js で URL クエリ パラメータを解析する方法を紹介し、記事の下部で URL パラメータ値を取得する 2 つの方法を紹介します。非常に優れており、参考になります。参照する必要があります

これ以上ナンセンスではありません。具体的なコードは次のとおりです:


var path = 'www.u.com/home?id=2&type=0&dtype=-1';
function parseUrl(url){
  var result = [];
  var query = url.split("?")[1];
  var queryArr = query.split("&");
  queryArr.forEach(function(item){
    var obj = {};
    var value = item.split("=")[0];
    var key = item.split("=")[1];
    obj[key] = value;
    result.push(obj);
  });
  return result;
}
console.log(parseUrl(path)); 
//[{id: '2'},{type: '0'},{dtype: '-1'}]
ログイン後にコピー

それでは、URL を取得する 2 つの方法を見てみましょう。 jsのパラメータ値

方法1:通常の分析方法

コードは次のとおりです:


function getQueryString(name) { 
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
var r = window.location.search.substr(1).match(reg); 
if (r != null) return unescape(r[2]); return null; 
}
ログイン後にコピー

メソッドの呼び出し:


alert(GetQueryString("参数名1"));alert(GetQueryString("参数名2")); 
alert(GetQueryString("参数名3"));
ログイン後にコピー

方法2

コードは次のとおりです続く:


<Script language="javascript"> 
function GetRequest() { 
var url = location.search; //获取url中"?"符后的字串 
var theRequest = new Object(); 
if (url.indexOf("?") != -1) { 
var str = url.substr(1); 
strs = str.split("&"); 
for(var i = 0; i < strs.length; i ++) { 
theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]); 
} 
} 
return theRequest; 
} 
</Script>
ログイン後にコピー

呼び出し方法:


<Script language="javascript"> 
var Request = new Object(); 
Request = GetRequest(); 
var 参数1,参数2,参数3,参数N; 
参数1 = Request[&#39;参数1&#39;]; 
参数2 = Request[&#39;参数2&#39;]; 
参数3 = Request[&#39;参数3&#39;]; 
参数N = Request[&#39;参数N&#39;]; 
</Script>
ログイン後にコピー

以上がURL 解析クエリパラメータの JavaScript コードの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート