을 구축하는 방법 query string Javascript
-
11-07-2019 - |
문제
궁금한 것이 있다면 내장된 자바 스크립트를 취할 수 있는 형태 및 반환 쿼리 매개변수,예를 들어:"var1=value&var2=값 2&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는 매개 변수의 a (키 -> 값) 매핑을 반환합니다. 입력은 양식 요소 (DOM 요소)입니다.
다중 선택을 허용하는 필드를 처리하지 않습니다.
다른 팁
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);
이것은 귀하의 질문에 직접 대답하지는 않지만 여기에는 쿼리 문자열 매개 변수가 포함 된 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
이제 이것에 대한 API가 있습니다 urlsearchparams API. 주어진 예제 :
const params = new URLSearchParams();
const formvals = {
var1: "value",
var2: "value2",
arr: "foo",
};
for (const [key, val] of Object.entries(formvals)) {
params.append(key, val);
}
console.log(params.toString());
// var1=value&var2=value2&arr=foo
메모: 그것은이다 꽤 호환됩니다 요즘 Chrome과 Firefox를 사용하면 호환성이 부분적이므로 Microsoft 및 Apple 브라우저와 함께 작업 해야하는 경우 조심하십시오.
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"
아니요, 표준 javaScript에 내장 된 것이 있다고 생각하지 않지만 프로토 타입 JS는 그 기능을 가지고 있습니다 (확실히 다른 JS 프레임 워크도 가지고 있지만 알지 못합니다). 직렬화.
프로토 타입 JS를 추천 할 수 있습니다. 정말 잘 작동합니다. 내가 실제로 그것을 알아 차린 유일한 단점은 크기 (수백 kb)와 범위 (Ajax, Dom 등에 대한 많은 코드)를 보았습니다. 따라서 양식 세력화 만 원한다면 과도한 킬로미터이며 엄격하게 말하면 Ajax 기능 만 원한다면 (주로 내가 사용한 것임) 과잉입니다. 조심하지 않으면 너무 많은 "마법"을 수행한다는 것을 알 수 있습니다 (모든 DOM 요소를 확장하면 요소를 찾기 위해 프로토 타입 js 기능을 사용하는 것)가 극단적 인 경우 속도가 느려집니다.
쿼리 스트링 도울 수있다.
그래서 당신은 할 수 있습니다
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'
나는 전적으로 확신하지 못한다. 나는 jQuery가 어느 정도 그렇게 한 것을 본 것을 기억하지만, PHP 친화적 인 방식으로는 물론 계층 적 기록을 전혀 처리하지는 않는다.
내가 알고있는 한 가지는 URL을 구축하고 제품을 DOM에 붙일 때 String-Glue를 사용하여 수행하지 않으면 편리한 페이지 차단기에 자신을 열어 줄 것입니다.
예를 들어, 특정 광고 소프트웨어는 플래시를 실행하는 모든 것의 버전 문자열을 인라인으로 내려갑니다. GNASH'ES 버전 문자열이 완전히 날아간 GPL 저작권 라이센스가 포함되어 있기 때문에 GNASH를 설치 한 사람들에게 매우 순진하고 부끄러운 혼란에 빠지면 URLS가 완료되므로 GNASH를 설치 한 사람들에게 부끄러운 혼란으로 불이 붙는 것이 좋습니다. 그리고 u003Ca href>태그. 이것을 String-Glue 광고주 생성기에서 사용하면 페이지가 열리고 DOM에서 불균형 HTML이 나타납니다.u003C/a>
이 이야기의 교훈:
var foo = document.createElement("elementnamehere");
foo.attribute = allUserSpecifiedDataConsideredDangerousHere;
somenode.appendChild(foo);
아니다:
document.write("<elementnamehere attribute=\""
+ ilovebrokenwebsites
+ "\">"
+ stringdata
+ "</elementnamehere>");
Google 은이 트릭을 배워야합니다. 나는 문제를보고하려고 노력했지만 신경 쓰지 않는 것 같습니다.
Stein이 말했듯이 프로토 타입 JavaScript 라이브러리를 사용할 수 있습니다. http://www.prototypejs.org. JS를 포함 시키면 매우 간단합니다. $('formName').serialize()
당신이 원하는 것을 반환 할 것입니다!
jQuery를 선호하는 사람들에게는 양식 플러그인을 사용합니다. http://plugins.jquery.com/project/form, Formserialize 방법이 포함되어 있습니다.
요즘에는 그렇게 할 수 있습니다 FormData
그리고 URLSearchParams
아무것도 반복 할 필요가 없습니다.
const formData = new FormData(form);
const searchParams = new URLSearchParams(formData);
const queryString = searchParams.toString();
그러나 이전 브라우저에는 폴리 필이 필요합니다.
이 답변은 매우 도움이되지만 전체 URL을 구축하는 데 도움이 될 수있는 다른 답변을 추가하고 싶습니다. 이것은 당신이 기지를 연결하는 데 도움이 될 수 있습니다 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);
아마도 당신의 질문에 대답하기에는 너무 늦었을 것입니다.
나는 같은 질문이 있었고 URL을 만들기 위해 문자열을 계속 부여하고 싶지 않았습니다. 그래서 $ .param AS를 사용하기 시작했습니다 기술 하우스 설명했다.
나는 또한 a를 찾았다 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>