web-dev-qa-db-ja.com

jQueryはURLにパラメータを追加します

JQueryの$ .ajax（）メソッドでリクエストURLを指定できる方法が気に入っています。

{
  url: 'http://domain.com/?param=1',
  data{
    param2: '2'
  }
}

$ .ajax（）メソッドは（おそらく）提供されたデータに対して$ .param（）を呼び出し、オプションで提供されたURLに追加します。

私の質問は次のとおりです。このタイプのURL操作は$ .ajax（）呼び出しの外で利用できますか？

たとえば、ポップアップウィンドウを開き、$。ajax（）と同じ方法でURLを作成したいとします。

これを行う関数を作成しましたが、ホイールを再発明し、jQueryの既存の関数を複製しているような気がします。

var prepareUrl = function( url, data )
{
  var params = $.param( data );

  if ( params.length > 0 )
  {
    // url contains a query string
    if ( url.indexOf( '?' ) > -1 )
    {
      // get last char of url
      var lastChar = url.substr( url.length - 1 );

      // Append & to the end of url if required
      if ( lastChar != '&' && lastChar != '?' )
      {
        url += '&';
      }
    }

    else // url doesn't contain a query string
    {
      url += '?';
    }

    url += params;
  }

  return url;
}

ありがとう！

javascriptjqueryajaxurlparam
11
Karolis

他の返信では私の質問に答えられなかったため、$.ajax()呼び出しを使用していくつかのテストを行い、URLとパラメーターデータをマージする方法を確認しました。

これまでの私の発見：

  • uRLに_?_が含まれている場合、$.ajax()は_'&'_ + $.param(data)を追加します
  • そうでない場合、$.ajax()は_'?'_ + $.param(data)を追加します

したがって、URL処理関数を$.ajax()が行う方法と一致させたい場合は、次のようにする必要があります。

_  var addParams = function( url, data )
  {
    if ( ! $.isEmptyObject(data) )
    {
      url += ( url.indexOf('?') >= 0 ? '&' : '?' ) + $.param(data);
    }

    return url;
  }
_

これを行うための組み込みのjQueryメソッドがあるかどうか私はまだ疑問に思っています。

6
Karolis

次のようにしてquery stringを構築できます。

getQueryStr = function(obj) {
    var str = [];
    for (var p in obj)
        if (obj.hasOwnProperty(p)) {
            str.Push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        }
    return str.join("&");
}

console.log(serialize({
    param1: "val1",
    param2: "val2"
}));

再帰的：

getQueryStr = function(obj, prefix) {
    var str = [];
    for (var p in obj) {
        if (obj.hasOwnProperty(p)) {
            var k = prefix ? prefix + "[" + p + "]" : p,
                v = obj[p];
            str.Push(typeof v == "object" ?
                getQueryStr(v, k) :
                encodeURIComponent(k) + "=" + encodeURIComponent(v));
        }
    }
    return str.join("&");
}

console.log(serialize({
    favfruit: "Apple",
    data: {
        name: 'js',
        points: [1, 2, 3]
    }
}));
2
Shreejibawa

はい、jqueries .param()関数を使用してこれを行うことができます。

jsfiddleデモ

var params = { param1:"foo", param2:"bar"};
var str = jQuery.param( params );
alert(str);
2
kasper Taeymans

param メソッドはクエリ文字列を生成しますが、既存のクエリ文字列を削除する必要があります。

var base = "http://example.com/foo/?example=old";
var data = {
  foo: "hello",
  bar: "world?"
};
var url = base.replace(/\?.*$/, "") + "?" + jQuery.param(data);
alert(url);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1
Quentin