बस सोच रहे हैं कि कोई ऐसी कोई अंतर्निहित जावास्क्रिप्ट है जो फॉर्म ले सकती है और क्वेरी पैरामीटर वापस कर सकती है, जैसे: "var1=value&var2=value2&arr[]=foo&arr[]=bar..."
मैं वर्षों से यह सोच रहा हूं।
जवाबों:
मैंने कुछ समय पहले इस प्रश्न के उत्तर की खोज करने की कोशिश की थी, लेकिन मैंने अपना स्वयं का फ़ंक्शन लिखना समाप्त कर दिया, जो फ़ॉर्म से मान निकालता है।
यह सही नहीं है, लेकिन यह मेरी जरूरतों को पूरा करता है।
function form_params( form )
{
var params = new Array()
var length = form.elements.length
for( var i = 0; i < length; i++ )
{
element = form.elements[i]
if(element.tagName == 'TEXTAREA' )
{
params[element.name] = element.value
}
else if( element.tagName == 'INPUT' )
{
if( element.type == 'text' || element.type == 'hidden' || element.type == 'password')
{
params[element.name] = element.value
}
else if( element.type == 'radio' && element.checked )
{
if( !element.value )
params[element.name] = "on"
else
params[element.name] = element.value
}
else if( element.type == 'checkbox' && element.checked )
{
if( !element.value )
params[element.name] = "on"
else
params[element.name] = element.value
}
}
}
return params;
}form_params मापदंडों की कुंजी (कुंजी -> मूल्य) मैपिंग देता है। इनपुट रूप तत्व (DOM तत्व) है
यह उन फ़ील्ड्स को हैंडल नहीं करता है जो कई चयन की अनुमति देते हैं।
new Array()एक शब्दकोश प्रारंभ करने में। लेकिन फिर, कोड कुछ बकवास की तुलना में बहुत साफ दिखता है जो मैं इन दिनों लिखूंगा!
2k20 अपडेट: URLSearchParams.toString () के साथ जोश के समाधान का उपयोग करें ।
पुराना उत्तर:
बिना jQuery के
var params = {
parameter1: 'value_1',
parameter2: 'value 2',
parameter3: 'value&3'
};
var esc = encodeURIComponent;
var query = Object.keys(params)
.map(k => esc(k) + '=' + esc(params[k]))
.join('&');तीर फ़ंक्शन सिंटैक्स का समर्थन नहीं करने वाले ब्राउज़र के लिए, जिन्हें ES5 की आवश्यकता होती है, .map...लाइन को बदल दें
.map(function(k) {return esc(k) + '=' + esc(params[k]);})यदि आप jQuery का उपयोग कर रहे हैं, तो आप जांच कर सकते हैं jQuery.param() http://api.jquery.com/jQuery.param/ की
उदाहरण:
var params = {
parameter1: 'value1',
parameter2: 'value2',
parameter3: 'value3'
};
var query = $.param(params);
document.write(query);$.param($('#myform').serializeArray())।
$('#myform').serialize()
jQuery !== JavaScript
jQuery.param()यहाँ github.com/jquery/jquery/blob/master/src/serialize.js :) के कार्यान्वयन की जाँच कर सकते हैं :
someStr=value1&someObj[a]=5&someObj[b]=6&someArr[]=1&someArr[]=2
URLSearchParams API सभी आधुनिक ब्राउज़रों में उपलब्ध है। उदाहरण के लिए:
const params = new URLSearchParams({
var1: "value",
var2: "value2",
arr: "foo",
});
console.log(params.toString());
//Prints "var1=value&var2=value2&arr=foo"params.append(key, value)बाद में अधिक जटिल परिदृश्यों में नए खोज पैरामेट्स जोड़ने के लिए कर सकते हैं ।
x=null&y=undefined
const url = new URL("https://stackoverflow.com")), तो आप इसके क्वेरी स्ट्रिंग्स सेट कर सकते हैं url.search = new URLSearchParams({foo: "bar"})याurl.searchParams.append("foo", "bar")
यह सीधे आपके प्रश्न का उत्तर नहीं देता है, लेकिन यहां एक सामान्य फ़ंक्शन है जो एक URL बनाएगा जिसमें क्वेरी स्ट्रिंग पैरामीटर होंगे। किसी URL में शामिल करने के लिए पैरामीटर (नाम और मूल्य) सुरक्षित रूप से बच गए हैं।
function buildUrl(url, parameters){
var qs = "";
for(var key in parameters) {
var value = parameters[key];
qs += encodeURIComponent(key) + "=" + encodeURIComponent(value) + "&";
}
if (qs.length > 0){
qs = qs.substring(0, qs.length-1); //chop off last "&"
url = url + "?" + qs;
}
return url;
}
// example:
var url = "http://example.com/";
var parameters = {
name: "George Washington",
dob: "17320222"
};
console.log(buildUrl(url, parameters));
// => http://www.example.com/?name=George%20Washington&dob=17320222new Arrayआपको एक वस्तु के रूप में वास्तव में इसका उपयोग करने की आवश्यकता क्यों है ? ओ, ओ
का उपयोग करना 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"नहीं, मुझे नहीं लगता कि मानक जावास्क्रिप्ट है कि में बनाया गया है, लेकिन प्रोटोटाइप जेएस है कि समारोह (निश्चित रूप से सबसे अन्य जेएस चौखटे भी है, लेकिन मैं उन्हें नहीं जानता), वे इसे क्रमबद्ध कहते हैं ।
मैं प्रोटोटाइप जेएस को फिर से लागू कर सकता हूं, यह काफी ठीक है। एकमात्र दोष मैंने वास्तव में देखा है कि यह आकार (कुछ सौ केबी) और स्कोप है (बहुत सारे कोड अजाक्स, डोम, आदि के लिए)। इस प्रकार यदि आप केवल एक फॉर्म क्रमांक चाहते हैं तो यह ओवरकिल है, और यदि आप केवल यह चाहते हैं कि यह अजाक्स कार्यक्षमता है (जो मुख्य रूप से मैंने इसे इसके लिए उपयोग किया है) तो यह ओवरकिल है। जब तक आप सावधान न हों, आप पा सकते हैं कि यह थोड़ा बहुत "जादू" करता है (जैसे कि प्रत्येक मूल तत्व को फैलाना यह प्रोटोटाइप जेएस कार्यों के साथ बस तत्वों को खोजने के लिए छूता है) इसे चरम मामलों पर धीमा कर देता है।
क्वेरी स्ट्रिंग मदद कर सकता है।
तो तुम कर सकते हो
const querystring = require('querystring')
url += '?' + querystring.stringify(parameters)यदि आप लाइब्रेरी का उपयोग नहीं करना चाहते हैं, तो यह एक ही फॉर्म एलिमेंट प्रकार के अधिकांश / सभी को कवर करना चाहिए।
function serialize(form) {
if (!form || !form.elements) return;
var serial = [], i, j, first;
var add = function (name, value) {
serial.push(encodeURIComponent(name) + '=' + encodeURIComponent(value));
}
var elems = form.elements;
for (i = 0; i < elems.length; i += 1, first = false) {
if (elems[i].name.length > 0) { /* don't include unnamed elements */
switch (elems[i].type) {
case 'select-one': first = true;
case 'select-multiple':
for (j = 0; j < elems[i].options.length; j += 1)
if (elems[i].options[j].selected) {
add(elems[i].name, elems[i].options[j].value);
if (first) break; /* stop searching for select-one */
}
break;
case 'checkbox':
case 'radio': if (!elems[i].checked) break; /* else continue */
default: add(elems[i].name, elems[i].value); break;
}
}
}
return serial.join('&');
}आपको वास्तव में प्रोटोटाइप के साथ ऐसा करने के लिए फॉर्म की आवश्यकता नहीं है। बस Object.toQueryString फ़ंक्शन का उपयोग करें :
Object.toQueryString({ action: 'ship', order_id: 123, fees: ['f1', 'f2'], 'label': 'a demo' })
// -> 'action=ship&order_id=123&fees=f1&fees=f2&label=a%20demo'आप ऐसा कर सकते हैं FormDataऔर आजकल URLSearchParamsकिसी भी चीज को लूप करने की आवश्यकता के बिना।
const formData = new FormData(form);
const searchParams = new URLSearchParams(formData);
const queryString = searchParams.toString();पुराने ब्राउज़रों को एक पॉलीफ़िल की आवश्यकता होगी, हालांकि।
मैं अपने आप पर पूरी तरह से निश्चित नहीं हूं, मुझे याद है कि jQuery ने एक हद तक ऐसा किया है, लेकिन यह पदानुक्रमित रिकॉर्ड को बिल्कुल भी नहीं संभालता है, अकेले php के अनुकूल तरीके से चलो।
एक बात जो मैं निश्चित रूप से जानता हूं, वह यह है कि जब यूआरएल का निर्माण और उत्पाद को डोम में चिपका दिया जाता है, तो इसे करने के लिए केवल स्ट्रिंग-गोंद का उपयोग न करें, या आप अपने आप को एक आसान पृष्ठ ब्रेकर के लिए खोल देंगे।
उदाहरण के लिए, कुछ विज्ञापन सॉफ़्टवेयर आपके द्वारा चलाए जाने वाले फ्लैश से संस्करण स्ट्रिंग को इन-लाइन करते हैं। यह ठीक है जब इसके सामान्य जेनेरिक स्ट्रिंग की परिकल्पना की जाती है, लेकिन फिर भी, यह बहुत ही भोली है, और जिन लोगों ने Gnash को स्थापित किया है, उनके लिए एक शर्मनाक गड़बड़ी के रूप में सामने आता है, क्योंकि gnash'es संस्करण स्ट्रिंग URL के साथ पूर्ण विकसित BPL कॉपीराइट लाइसेंस शामिल करने के लिए होता है। और <a href> टैग। अपने स्ट्रिंग-गोंद विज्ञापनदाता जनरेटर में इसका उपयोग करने से पृष्ठ के खुलने और असंतुलित HTML के डोम में बदलने का परिणाम होता है।
कहानी का नैतिक पहलू है:
var foo = document.createElement("elementnamehere");
foo.attribute = allUserSpecifiedDataConsideredDangerousHere;
somenode.appendChild(foo); नहीं:
document.write("<elementnamehere attribute=\""
+ ilovebrokenwebsites
+ "\">"
+ stringdata
+ "</elementnamehere>");Google को यह ट्रिक सीखने की जरूरत है। मैंने समस्या की रिपोर्ट करने की कोशिश की, वे परवाह नहीं करते दिखाई देते हैं।
जैसा कि स्टीन कहते हैं, आप http://www.prototypjs.org से प्रोटोटाइप जावास्क्रिप्ट लाइब्रेरी का उपयोग कर सकते हैं । जेएस को शामिल करें और यह बहुत सरल है, फिर $('formName').serialize()वही लौटाएगा जो आप चाहते हैं!
हममें से जो jQuery को पसंद करते हैं, आप फॉर्म प्लग इन का उपयोग करेंगे: http://plugins.jquery.com/project/form , जिसमें एक फॉर्मस्लाइज़ विधि है।
थोड़ा बेमानी हो सकता है, लेकिन सबसे साफ तरीका मुझे मिल गया है जो यहाँ कुछ उत्तरों पर बनाता है:
const params: {
key1: 'value1',
key2: 'value2',
key3: 'value3',
}
const esc = encodeURIComponent;
const query = Object.keys(params)
.map(k => esc(k) + '=' + esc(params[k]))
.join('&');
return fetch('my-url', {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: query,
})ये उत्तर बहुत मददगार हैं, लेकिन मैं एक और उत्तर जोड़ना चाहता हूं, जिससे आपको पूर्ण URL बनाने में मदद मिल सकती है। इस आधार concat आप मदद कर सकते हैं url, path, hashऔर parameters।
var url = buildUrl('http://mywebsite.com', {
path: 'about',
hash: 'contact',
queryParams: {
'var1': 'value',
'var2': 'value2',
'arr[]' : 'foo'
}
});
console.log(url);आप npm https://www.npmjs.com/package/build-url के माध्यम से डाउनलोड कर सकते हैं
डेमो:
;(function () {
'use strict';
var root = this;
var previousBuildUrl = root.buildUrl;
var buildUrl = function (url, options) {
var queryString = [];
var key;
var builtUrl;
var caseChange;
// 'lowerCase' parameter default = false,
if (options && options.lowerCase) {
caseChange = !!options.lowerCase;
} else {
caseChange = false;
}
if (url === null) {
builtUrl = '';
} else if (typeof(url) === 'object') {
builtUrl = '';
options = url;
} else {
builtUrl = url;
}
if(builtUrl && builtUrl[builtUrl.length - 1] === '/') {
builtUrl = builtUrl.slice(0, -1);
}
if (options) {
if (options.path) {
var localVar = String(options.path).trim();
if (caseChange) {
localVar = localVar.toLowerCase();
}
if (localVar.indexOf('/') === 0) {
builtUrl += localVar;
} else {
builtUrl += '/' + localVar;
}
}
if (options.queryParams) {
for (key in options.queryParams) {
if (options.queryParams.hasOwnProperty(key) && options.queryParams[key] !== void 0) {
var encodedParam;
if (options.disableCSV && Array.isArray(options.queryParams[key]) && options.queryParams[key].length) {
for(var i = 0; i < options.queryParams[key].length; i++) {
encodedParam = encodeURIComponent(String(options.queryParams[key][i]).trim());
queryString.push(key + '=' + encodedParam);
}
} else {
if (caseChange) {
encodedParam = encodeURIComponent(String(options.queryParams[key]).trim().toLowerCase());
}
else {
encodedParam = encodeURIComponent(String(options.queryParams[key]).trim());
}
queryString.push(key + '=' + encodedParam);
}
}
}
builtUrl += '?' + queryString.join('&');
}
if (options.hash) {
if(caseChange)
builtUrl += '#' + String(options.hash).trim().toLowerCase();
else
builtUrl += '#' + String(options.hash).trim();
}
}
return builtUrl;
};
buildUrl.noConflict = function () {
root.buildUrl = previousBuildUrl;
return buildUrl;
};
if (typeof(exports) !== 'undefined') {
if (typeof(module) !== 'undefined' && module.exports) {
exports = module.exports = buildUrl;
}
exports.buildUrl = buildUrl;
} else {
root.buildUrl = buildUrl;
}
}).call(this);
var url = buildUrl('http://mywebsite.com', {
path: 'about',
hash: 'contact',
queryParams: {
'var1': 'value',
'var2': 'value2',
'arr[]' : 'foo'
}
});
console.log(url);मुझे पता है कि यह बहुत देर से जवाब है लेकिन बहुत अच्छी तरह से काम करता है ...
var obj = {
a:"a",
b:"b"
}
Object.entries(obj).map(([key, val])=>`${key}=${val}`).join("&");ध्यान दें: object.entries कुंजी, मान जोड़े को लौटा देगा
उपरोक्त लाइन से आउटपुट a = a और b = b होगा
आशा है कि यह किसी की मदद करता है।
हैप्पी कोडिंग ...
अपने प्रश्न का उत्तर देने में शायद बहुत देर हो चुकी है।
मेरे पास एक ही सवाल था और यूआरएल बनाने के लिए मैं तार जोड़कर नहीं रखना चाहता था। इसलिए, मैंने $ .param का उपयोग करना शुरू कर दिया क्योंकि टेकहाउस ने समझाया।
मुझे एक URI.js पुस्तकालय भी मिला जो आपके लिए आसानी से URL बनाता है। ऐसे कई उदाहरण हैं जो आपकी मदद करेंगे: URI.js प्रलेखन ।
उनमें से एक यहां पर है:
var uri = new URI("?hello=world");
uri.setSearch("hello", "mars"); // returns the URI instance for chaining
// uri == "?hello=mars"
uri.setSearch({ foo: "bar", goodbye : ["world", "mars"] });
// uri == "?hello=mars&foo=bar&goodbye=world&goodbye=mars"
uri.setSearch("goodbye", "sun");
// uri == "?hello=mars&foo=bar&goodbye=sun"
// CAUTION: beware of arrays, the following are not quite the same
// If you're dealing with PHP, you probably want the latter…
uri.setSearch("foo", ["bar", "baz"]);
uri.setSearch("foo[]", ["bar", "baz"]);`var params = { width:1680, height:1050 };
var str = jQuery.param( params );
console.log(str)<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>