JQueryを使用してGETおよびPOST変数を取得する方法


95

どうすれば簡単に取得GETしてPOST jQueryを使って値?

私がやりたいことは次のようなものです:

$('#container-1 > ul').tabs().tabs('select', $_GET('selectedTabIndex'));

回答:


170

GETパラメータの場合は、次の場所から取得できますdocument.location.search

var $_GET = {};

document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
    function decode(s) {
        return decodeURIComponent(s.split("+").join(" "));
    }

    $_GET[decode(arguments[1])] = decode(arguments[2]);
});

document.write($_GET["test"]);

POSTパラメータの$_POST場合、JSON形式のオブジェクトを<script>タグにシリアル化できます。

<script type="text/javascript">
var $_POST = <?php echo json_encode($_POST); ?>;

document.write($_POST["test"]);
</script>

あなたがそれをしている間(サーバー側で物事をやっている)、PHPでGETパラメーターも収集するかもしれません:

var $_GET = <?php echo json_encode($_GET); ?>;

注:組み込みjson_encode関数を使用するには、PHPバージョン5以降が必要です。


更新:より一般的な実装は次のとおりです。

function getQueryParams(qs) {
    qs = qs.split("+").join(" ");
    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])]
            = decodeURIComponent(tokens[2]);
    }

    return params;
}

var $_GET = getQueryParams(document.location.search);

3
抽出メソッドは、値のない引数を考慮しません( "?foo&bar = baz“ => {foo:" "、bar:" baz "})。
ガンボ

1
ガンボをキャッチ!正規表現の=はオプションにする必要があります:... snip ...(?:=([^&] *))?&?)/ g
Ates Goral

1.最初のGETの例ではうまくいかないようです。2.更新では、関数名にタイプミスがあります
ジェイクウィルソン

サファリやクロムでそれを実行してみましたか?無限ループが発生し、ブラウザがクラッシュします。「?p = 2」のような簡単なもので試してください
MrColes

@MrColes:いいね。これを書いてから久しぶりです。それ以来、リテラルとして使用される場合、WebkitがRegExpオブジェクトの内部位置カウンターを更新しないことを発見しました。回答を更新して更新します。
Ates Goral


6

古き良きPHPを使ってみませんか?たとえば、GETパラメータ 'target'を受け取ったとします。

function getTarget() {
    var targetParam = "<?php  echo $_GET['target'];  ?>";
    //alert(targetParam);
}

7
これはサーバー側のソリューションであり、クライアント側/ javascript / jQuery側に関する質問でした。
Hrvoje Kusulja 2014年

@hkusulja傷害に侮辱を加える:あなたがそれを断言しても、私はまだ質問がサーバー側だけにあることを確認できません。私は道具として濃く感じます...
tony gil

1
このスクリプトは恐ろしいです。サイトをハッキングしたい場合は、これを使用してください。ユーザーが入力した変数を常にエスケープします!! $ _GETを直接出力しないでください。
charj

5

または、これをhttp://plugins.jquery.com/project/parseQueryの 1つで使用できます。これはほとんどのサイズよりも小さく(449バイトに縮小)、名前と値のペアを表すオブジェクトを返します。


3

サーバー側の言語では、POST変数をJavaScriptに出力する必要があります。

。ネット

var my_post_variable = '<%= Request("post_variable") %>';

空の値に注意してください。排出しようとする変数が実際に空の場合、JavaScript構文エラーが発生します。文字列であることがわかっている場合は、引用符で囲む必要があります。整数の場合は、JavaScriptに行を書き込む前に、実際に存在するかどうかをテストしてください。


1
ただし、常にサーバー側の言語にアクセスできるわけではありません。たとえば、GitHubページ...
Adam B


2

これGETは、グローバルオブジェクトのすべての変数を収集するものです。これは、数年にわたって最適化されたルーチンです。jQueryの登場以来、jQuery自体にそれらを格納することが適切に思われ、潜在的なコア実装についてJohnに確認しています。

jQuery.extend({
    'Q' : window.location.search.length <= 1 ? {}
        : function(a){
            var i = a.length, 
                r = /%25/g,  // Ensure '%' is properly represented 
                h = {};      // (Safari auto-encodes '%', Firefox 1.5 does not)
            while(i--) {
                var p = a[i].split('=');
                h[ p[0] ] = r.test( p[1] ) ? decodeURIComponent( p[1] ) : p[1];
            }
            return h;
        }(window.location.search.substr(1).split('&'))
});

使用例:

switch ($.Q.event) {
    case 'new' :
        // http://www.site.com/?event=new
        $('#NewItemButton').trigger('click');
        break;
    default :
}

お役に立てれば。;)



1

$ _GETが多次元の場合、これはあなたが望むものかもしれません:

var $_GET = {};
document.location.search.replace(/\??(?:([^=]+)=([^&]*)&?)/g, function () {
    function decode(s) {
            return decodeURIComponent(s.split("+").join(" "));
    }

    //handling for multidimensional arrays
    if(decode(arguments[1]).indexOf("[]") > 0){
        var newName = decode(arguments[1]).substring(0, decode(arguments[1]).length - 2);
        if(typeof $_GET[newName] == 'undefined'){
            $_GET[newName] = new Array();
        }
        $_GET[newName].push(decode(arguments[2]));
    }else{
        $_GET[decode(arguments[1])] = decode(arguments[2]);
    }
});

1

シンプルですが、URLから変数/値を取得するのに便利です。

function getUrlVars() {
    var vars = [], hash, hashes = null;
    if (window.location.href.indexOf("?") && window.location.href.indexOf("&")) {
        hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    } else if (window.location.href.indexOf("?")) {
        hashes = window.location.href.slice(window.location.href.indexOf('?') + 1);
    }
    if (hashes != null) {
        for (var i = 0; i < hashes.length; i++) {
            hash = hashes[i].split('=');
            vars[hash[0]] = hash[1];
        }
    }
    return vars;
}

インターネット上のどこかで見つけた、いくつかのバグを修正した


1

次の関数を使用します。

var splitUrl = function() {
    var vars = [], hash;
    var url = document.URL.split('?')[0];
    var p = document.URL.split('?')[1];
    if(p != undefined){
        p = p.split('&');
        for(var i = 0; i < p.length; i++){
            hash = p[i].split('=');
            vars.push(hash[1]);
            vars[hash[0]] = hash[1];
        }
    }
    vars['url'] = url;
    return vars;
};

変数vars['index']'index'は、変数getの名前としてアクセスします。


このコードはのようなUTLでは失敗しますhttp://foo.com/?a=b#barb#barの価値だと思いますa
2015年

1

単純にする

VARIABLE_KEYを変数のキーに置き換えて、その値を取得します

 var get_value = window.location.href.match(/(?<=VARIABLE_KEY=)(.*?)[^&]+/)[0]; 

0

念のため、この質問の答えを知りたいので、PHPメソッドを使用しました。

<script>
var jGets = new Array ();
<?
if(isset($_GET)) {
    foreach($_GET as $key => $val)
        echo "jGets[\"$key\"]=\"$val\";\n";
}
?>
</script>

これにより、この後に実行されるすべてのjavascript / jqueryがjGetのすべてにアクセスできます。それは私が感じる素晴らしいエレガントなソリューションです。


0

私のアプローチ:

var urlParams;
(window.onpopstate = function () {
var match,
      pl     = /\+/g,  Regex for replacing addition symbol with a space
       search = /([^&=]+)=?([^&]*)/g,
      decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
       query  = window.location.search.substring(1);
   urlParams = {};
   while (match = search.exec(query))
    urlParams[decode(match[1])] = decode(match[2]);
})();
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.