Javascript에 Form이 있고 쿼리 매개 변수를 반환 할 수있는 기본 제공 항목이 있는지 궁금합니다. 예 : "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 요소)
다중 선택을 허용하는 필드는 처리하지 않습니다.
답변
2k20 업데이트 : URLSearchParams.toString () 과 함께 Josh의 솔루션을 사용하십시오 .
이전 답변 :
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);
답변
URLSearchParams API 는 모든 최신 브라우저에서 사용할 수 있습니다. 예를 들면 다음과 같습니다.
const params = new URLSearchParams({
var1: "value",
var2: "value2",
arr: "foo",
});
console.log(params.toString());
//Prints "var1=value&var2=value2&arr=foo"
답변
이것은 귀하의 질문에 직접 대답하지는 않지만 쿼리 문자열 매개 변수가 포함 된 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=17320222
답변
jQuery를 사용하면 다음과 같이 할 수 있습니다. $.param
$.param({ action: 'ship', order_id: 123, fees: ['f1', 'f2'], 'label': 'a demo' })
// -> "action=ship&order_id=123&fees%5B%5D=f1&fees%5B%5D=f2&label=a+demo"
답변
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"