জাভাস্ক্রিপ্টে অন্তর্নির্মিত এমন কোনও কিছু রয়েছে যা একটি ফর্ম নিতে এবং ক্যোয়ারীর প্যারামিটারগুলি ফেরত দিতে পারে, তা কেবল ভাবছেন: "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 আপডেট: URLS SearchParams.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 ব্যবহার করে থাকেন তবে আপনি http://api.jquery.com/jQuery.param/ চেক করতে পারেন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/seialize.js এর বাস্তবায়ন পরীক্ষা করতে পারেন :)
someStr=value1&someObj[a]=5&someObj[b]=6&someArr[]=1&someArr[]=2
ইউআরএল সার্চপ্যারাম এপিআই সমস্ত আধুনিক ব্রাউজারে উপলব্ধ। উদাহরণ স্বরূপ:
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")
এটি সরাসরি আপনার প্রশ্নের উত্তর দেয় না, তবে এখানে একটি জেনেরিক ফাংশন রয়েছে যা একটি ইউআরএল তৈরি করবে যাতে ক্যোয়ারিং স্ট্রিং পরামিতি রয়েছে। প্যারামিটারগুলি (নাম এবং মান) নিরাপদে কোনও ইউআরএল অন্তর্ভুক্তির জন্য পালিয়ে যায়।
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]]। এটি কেবল আইই দ্বারা সমর্থিত নয় (এবং হবে না)।
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({ 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 এটি কিছুটা হলেও করেছে, তবে এটি শ্রেণিবদ্ধ রেকর্ডগুলি মোটেও হ্যান্ডেল করে না, পিএইচপি বন্ধুত্বপূর্ণ উপায়ে ছেড়ে দেয়।
একটি জিনিস আমি নিশ্চিতভাবে জানতে পারি, এটি হল ইউআরএলগুলি তৈরি করার সময় এবং পণ্যটি ডোমের সাথে আঁকিয়ে রাখার সময়, কেবল স্ট্রিং-আঠালো এটি ব্যবহার করার জন্য ব্যবহার করবেন না, বা আপনি নিজেকে একটি সহজ পৃষ্ঠা ব্রেকারের কাছে খুলতে যাবেন।
উদাহরণস্বরূপ, কিছু নির্দিষ্ট বিজ্ঞাপন সফ্টওয়্যার আপনার ফ্ল্যাশ যা কিছু চালায় তার থেকে সংস্করণটিকে সাইন ইন করে। এটি ঠিক আছে যখন এর জেনেরিক সরল স্ট্রিংটি মানা হয়, তবে এটি খুব নিখুঁত এবং Gnash ইনস্টল করা লোকেদের জন্য বিব্রতকর গোলমেলে উড়ে যায়, কারণ gnash'es সংস্করণ স্ট্রিংয়ে সম্পূর্ণরূপে GPL কপিরাইট লাইসেন্স থাকে যা ইউআরএল সহ সম্পূর্ণ হয় happens এবং <a href> ট্যাগ। আপনার স্ট্রিং-আঠালো বিজ্ঞাপনদাতা জেনারেটরে এটি ব্যবহার করে, ফলাফলটি পৃষ্ঠাটি ফুলে ওঠে এবং ভারসাম্যহীন এইচটিএমএল ডোমটিতে পরিণত হয়।
গল্পটির সারাংশ হলো:
var foo = document.createElement("elementnamehere");
foo.attribute = allUserSpecifiedDataConsideredDangerousHere;
somenode.appendChild(foo); না:
document.write("<elementnamehere attribute=\""
+ ilovebrokenwebsites
+ "\">"
+ stringdata
+ "</elementnamehere>");গুগল এই কৌশল শিখতে হবে। আমি সমস্যাটি রিপোর্ট করার চেষ্টা করেছি, তারা যত্নশীল নয় বলে মনে হচ্ছে।
স্টেইন যেমন বলেছেন, আপনি http://www.prototypejs.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,
})এই উত্তরগুলি খুব সহায়ক, তবে আমি অন্য একটি উত্তর যুক্ত করতে চাই, এটি আপনাকে সম্পূর্ণ ইউআরএল তৈরি করতে সহায়তা করতে পারে। এই বেস 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);আপনি এনপিএম এর মাধ্যমে ডাউনলোড করতে পারেন 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("&");দ্রষ্টব্য: অবজেক্ট.এন্ট্রিগুলি কী প্রদান করবে, জোড়াগুলি মান দেবে
উপরের লাইন থেকে আউটপুট হবে a = a & b = b
আশা করি এটি কাউকে সাহায্য করবে।
শুভ কোডিং ...
সম্ভবত আপনার প্রশ্নের উত্তর দিতে খুব দেরী হয়েছে।
আমার একই প্রশ্ন ছিল এবং আমি ইউআরএল তৈরি করতে স্ট্রিং যুক্ত করতে পছন্দ করি না। সুতরাং, আমি টেকহাউস হিসাবে ব্যাখ্যা হিসাবে para .param ব্যবহার শুরু করেছি ।
আমি একটি ইউআরআই.জেএস লাইব্রেরিও পেয়েছি যা আপনার জন্য 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>