Javascript'te sorgu parametreleri nasıl oluşturulur?

JavaScript'te GET isteği yapmak için sorgu parametrelerini oluşturmanın herhangi bir yolu var mı ?

Tıpkı Python'da olduğu gibi, urllib.urlencode()bir sözlüğü (veya iki demet listesini) alan ve benzeri bir dize oluşturan 'var1=value1&var2=value2'.

Hadi bakalım:

function encodeQueryData(data) {
   const ret = [];
   for (let d in data)
     ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]));
   return ret.join('&');
}

Kullanımı:

const data = { 'first name': 'George', 'last name': 'Jetson', 'age': 110 };
const querystring = encodeQueryData(data);

URLSearchParams , artan tarayıcı desteğine sahiptir.

const data = {
  var1: 'value1',
  var2: 'value2'
};

const searchParams = new URLSearchParams(data);

// searchParams.toString() === 'var1=value1&var2=value2'

Node.js, sorgu dizisi modülünü sunar .

const querystring = require('querystring');

const data = {
  var1: 'value1',
  var2: 'value2'
};

const searchParams = querystring.stringify(data);

// searchParams === 'var1=value1&var2=value2'

fonksiyonel

function encodeData(data) {
    return Object.keys(data).map(function(key) {
        return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
}   

Zabba , şu anda kabul edilen cevapla ilgili bir yorumda, benim için en iyi çözümün benim için en iyi çözüm olduğuna dair bir öneri sundu : jQuery.param () kullanın .

jQuery.param()Orijinal sorudaki veriler üzerinde kullanırsam , kod basitçe:

const params = jQuery.param({
    var1: 'value',
    var2: 'value'
});

Değişken paramsolacak

"var1=value&var2=value"

Daha karmaşık örnekler, girdiler ve çıktılar için jQuery.param () belgelerine bakın.

Bu sorunu kesin olarak çözmeyi amaçlayan bir proje olan arg.js'yi kısa süre önce yayınladık . Geleneksel olarak çok zordu ama şimdi şunları yapabilirsiniz:

var querystring = Arg.url({name: "Mat", state: "CO"});

Ve okuma işleri:

var name = Arg("name");

veya hepsini almak:

var params = Arg.all();

ve arasındaki fark veriyorsan ?query=trueve #hash=trueardından kullanmak olabilir Arg.query()ve Arg.hash()yöntemler.

Bu işi yapmalı:

const createQueryParams = params => 
      Object.keys(params)
            .map(k => `${k}=${encodeURI(params[k])}`)
            .join('&');

Misal:

const params = { name : 'John', postcode: 'W1 2DL'}
const queryParams = createQueryParams(params)

Sonuç:

name=John&postcode=W1%202DL

ES2017 (ES8)

Kullanmak Object.entries(), bir nesne [key, value]çiftleri dizisi döndürür . Örneğin, {a: 1, b: 2}geri dönecekti [['a', 1], ['b', 2]]. Yalnızca IE tarafından desteklenmez (ve desteklenmez).

Kod:

const buildURLQuery = obj =>
      Object.entries(obj)
            .map(pair => pair.map(encodeURIComponent).join('='))
            .join('&');

Misal:

buildURLQuery({name: 'John', gender: 'male'});

Sonuç:

"name=John&gender=male"

Eğer kullanıyorsanız Prototype var Form.serialize

JQuery kullanıyorsanız , Ajax / serialize var

Bununla birlikte, bunu başarmak için herhangi bir bağımsız işlev bilmiyorum, ancak bunun için bir Google araması, şu anda bir kitaplık kullanmıyorsanız bazı umut verici seçenekler ortaya çıkardı. Eğer değilseniz, gerçekten yapmalısınız çünkü onlar cennettir.

Neredeyse 10 yıllık bu soruyu tekrar gözden geçirmek gibi. Kullanıma hazır programlama çağında, en iyi seçeneğiniz projenizi bir bağımlılık yöneticisi ( npm) kullanarak oluşturmaktır . Sorgu dizelerini kodlayan ve tüm uç durumlarla ilgilenen koca bir kütüphane endüstrisi var. Bu en popüler olanlardan biri -

https://www.npmjs.com/package/query-string

Yazı tipinde küçük bir değişiklik:

  public encodeData(data: any): string {
    return Object.keys(data).map((key) => {
      return [key, data[key]].map(encodeURIComponent).join("=");
    }).join("&");
  }

Bu iş parçacığı php'de URL'lerden kaçmak için bazı koda işaret ediyor. Var escape()ve unescape()işin çoğunu yapacak, ancak birkaç ek şey eklemeniz gerekiyor.

function urlencode(str) {
str = escape(str);
str = str.replace('+', '%2B');
str = str.replace('%20', '+');
str = str.replace('*', '%2A');
str = str.replace('/', '%2F');
str = str.replace('@', '%40');
return str;
}

function urldecode(str) {
str = str.replace('+', ' ');
str = unescape(str);
return str;
}