जावास्क्रिप्ट में क्वेरी पैरामीटर कैसे बनाएं?

Question

क्या जावास्क्रिप्ट में GET अनुरोध करने के लिए क्वेरी पैरामीटर बनाने का कोई तरीका है ?

जैसे आपके पास पाइथन है urllib.urlencode(), जो एक शब्दकोश (या दो टुपल्स की सूची) में लेता है और जैसे एक स्ट्रिंग बनाता है 'var1=value1&var2=value2'।

Answer 1

हेयर यू गो:

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

उपयोग:

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

Comments

के साथ पुनरावृत्ति करते समय for, अंतर सुनिश्चित करने के लिए hasOwnProperty का उपयोग करें।

— troelskn

@troelskn, अच्छी बात है ... हालांकि इस मामले में, किसी को इसे तोड़ने के लिए Object.prototype का विस्तार करना होगा, जिसे शुरू करना एक बहुत बुरा विचार है।

— शोग

@ शोग 9 यह एक बुरी विचारधारा क्यों है?

— सीजर कैनसा

@

— सीजर

बस एक छोटा सा विवरण, लेकिन रिट कॉन्स्ट हो सकता है

— अलकिस मावरिडिस

Answer 2

URLSearchParams में ब्राउज़र समर्थन बढ़ रहा है।

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

const searchParams = new URLSearchParams(data);

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

Node.js क्वेरिस्ट्रिंग मॉड्यूल प्रदान करता है ।

const querystring = require('querystring');

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

const searchParams = querystring.stringify(data);

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

Comments

निश्चित रूप से स्वच्छ और आधुनिक दृष्टिकोण। आप बाद में स्वतंत्र रूप से कॉल भी कर सकते हैंsearchParams.append(otherData)

— कानो

Answer 3

कार्यात्मक

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

Comments

अच्छा है! .map () जावास्क्रिप्ट 1.6 में लागू किया गया है तो लगभग सभी ब्राउज़र, यहां तक ​​कि दादी भी इसका समर्थन करती हैं। लेकिन जैसा कि आप अनुमान लगा सकते हैं कि IE IE 9+ को छोड़कर नहीं करता है। लेकिन चिंता न करें, एक वर्कअराउंड है। स्रोत: developer.mozilla.org/en-US/docs/JavaScript/Reference/…

— अक्सेली पैलेन

var data = { bloop1: true, bloop2: "something" }; var url = "https://something.com/?"; var params = encodeData(data); var finalUrl = url + params; // Is this the right use?उत्पादन करना चाहिए https://www.something.com/?bloop1=true&bloop2=something?

— dylanh724

@DylanHunt: हाँ ...

— Przemek

Answer 4

ज़ब्बा ने वर्तमान में स्वीकृत जवाब पर एक टिप्पणी में कहा है कि मेरे लिए सबसे अच्छा समाधान है: jQuery.param () का उपयोग करें ।

यदि मैं jQuery.param()मूल प्रश्न में डेटा का उपयोग करता हूं , तो कोड बस है:

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

चर paramsहोगा

"var1=value&var2=value"

अधिक जटिल उदाहरण, इनपुट और आउटपुट के लिए, jQuery.param () प्रलेखन देखें।

Answer 5

हमने अभी-अभी arg.js जारी किया है , जिसका उद्देश्य एक बार और सभी के लिए इस समस्या को हल करना है। यह पारंपरिक रूप से इतना कठिन रहा है लेकिन अब आप यह कर सकते हैं:

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

और पढ़ना काम करता है:

var name = Arg("name");

या पूरी बहुत मिल रही है:

var params = Arg.all();

और यदि आप के बीच अंतर के बारे में परवाह है ?query=trueऔर #hash=trueफिर आप Arg.query()और Arg.hash()विधियों का उपयोग कर सकते हैं ।

Answer 6

यह काम करना चाहिए:

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

उदाहरण:

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

परिणाम:

name=John&postcode=W1%202DL

Comments

मुझे बाद में एहसास हुआ कि यह वास्तव में @ मानव की प्रतिक्रिया का थोड़ा अलग संस्करण है। लेकिन वैसे भी, यह अभी भी ES6 सिंटैक्स के लिए बेहतर हो सकता है।

— नोएगो

सबसे पहले, आप कुंजियों को एन्कोडिंग नहीं कर रहे हैं। इसके अलावा, आपको इसके encodeURIComponent()बजाय उपयोग करना चाहिए encodeURI। अंतर के बारे में पढ़ें ।

— प्रेजेमेक

Answer 7

ES2017 (ES8)

का उपयोग करना Object.entries(), जो ऑब्जेक्ट के [key, value]जोड़े की एक सरणी लौटाता है । उदाहरण के लिए, {a: 1, b: 2}यह वापस आ जाएगा [['a', 1], ['b', 2]]। यह केवल IE द्वारा समर्थित (और नहीं होगा) नहीं है।

कोड:

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

उदाहरण:

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

परिणाम:

"name=John&gender=male"

Answer 8

आप उपयोग कर रहे हैं प्रोटोटाइप है Form.serialize

आप उपयोग कर रहे हैं jQuery है अजाक्स / serialize

हालांकि, इसे पूरा करने के लिए मुझे किसी भी स्वतंत्र कार्य का पता नहीं है, लेकिन इसके लिए एक Google खोज ने कुछ आशाजनक विकल्प दिए हैं यदि आप वर्तमान में पुस्तकालय का उपयोग नहीं कर रहे हैं। यदि आप नहीं हैं, हालांकि, आपको वास्तव में चाहिए क्योंकि वे स्वर्ग हैं।

Comments

jQuery.param () ऑब्जेक्ट लेता है और इसे GET क्वेरी स्ट्रिंग में बदलता है (यह फ़ंक्शन प्रश्न से बेहतर रूप से मेल खाता है)।

— अज़ुरकिन

Answer 9

बस इस लगभग 10 साल पुराने सवाल को फिर से देखना पसंद है। ऑफ-द-शेल्फ प्रोग्रामिंग के इस युग में, आपकी सबसे अच्छी शर्त एक निर्भरता प्रबंधक ( npm) का उपयोग करके अपनी परियोजना स्थापित करना है । वहाँ पुस्तकालयों का एक पूरा कुटीर उद्योग है जो क्वेरी स्ट्रिंग को एन्कोड करता है और सभी किनारे मामलों की देखभाल करता है। यह अधिक लोकप्रिय लोगों में से एक है -

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

Comments

बहुत ही अनिर्दिष्ट उत्तर।

— मास्टरएक्सिलो

Answer 10

टाइपस्क्रिप्ट में थोड़ा संशोधन:

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

Answer 11

यह धागा php में URL से बचने के लिए कुछ कोड की ओर इशारा करता है। वहाँ escape()और unescape()जो अधिकांश काम करेगा, लेकिन आपको कुछ अतिरिक्त चीजें जोड़ने की आवश्यकता है।

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;
}

Comments

encodeURIComponent इसे संभालता है और किसी स्थान के लिए गलत तरीके से + का उपयोग नहीं करता है।

— एंथोनीवजोन