Javascript로 쿼리 문자열을 작성하는 방법

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"

아니, 표준 자바 스크립트가 내장되어 있다고 생각하지 않지만, 프로토 타입 JS는 기능 (확실히 다른 대부분의 JS 프레임 워크도 가지고 있지만, 내가 그들을 모르는)가 호출이 직렬화를 .

Prototype JS를 추천 할 수 있습니다. 내가 실제로 발견 한 유일한 단점은 크기 (수백 kb)와 범위 (아약스, 돔 등을위한 많은 코드)라는 것을 알았습니다. 따라서 폼 serializer 만 원한다면 과잉이며 Ajax 기능 만 원한다면 엄격하게 말하면 과잉입니다. 주의하지 않으면 너무 많은 "마법"을 수행한다는 것을 알 수 있습니다 (예를 들어 요소를 찾기 위해 프로토 타입 JS 함수로 터치하는 모든 dom 요소를 확장하는 것과 같이).

querystring 이 도움이 될 수 있습니다.

그래서, 당신은 할 수 있습니다

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 친화적 인 방식으로 계층 적 레코드를 전혀 처리하지는 않습니다.

내가 확실히 알고있는 한 가지는 URL을 만들고 제품을 DOM에 집어 넣을 때 문자열 접착제를 사용하지 말고 편리한 페이지 차단기를 여는 것입니다.

예를 들어 특정 광고 소프트웨어는 플래시를 실행하는 모든 버전의 버전 문자열을 인라인합니다. GNASH의 버전 문자열에 URL이 포함 된 GPL 저작권 라이센스가 완전히 포함되어 있기 때문에 Gnash를 설치 한 사람들에게는 당황스럽고 엉망이됩니다. 및 <a href> 태그. 이를 문자열 접착제 광고주 생성기에서 사용하면 페이지가 열리고 HTML에서 불균형 한 HTML이 나타납니다.

이 이야기의 교훈:

   var foo = document.createElement("elementnamehere"); 
   foo.attribute = allUserSpecifiedDataConsideredDangerousHere; 
   somenode.appendChild(foo); 

아니:

   document.write("<elementnamehere attribute=\"" 
        + ilovebrokenwebsites 
        + "\">" 
        + stringdata 
        + "</elementnamehere>");

_{Google은이 트릭을 배워야합니다. 문제를보고하려고했지만 걱정하지 않는 것 같습니다.}

Stein이 말했듯이 http://www.prototypejs.org 의 프로토 타입 자바 스크립트 라이브러리를 사용할 수 있습니다 . JS를 포함하면 매우 간단 $('formName').serialize()합니다. 원하는 것을 반환합니다!

jQuery를 선호하는 사람들은 formSerialize 메소드가 포함 된 plugin : 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입니다.

그것이 누군가를 돕기를 바랍니다.

행복한 코딩 ...

질문에 대답하기에 너무 늦었을 수 있습니다.
나는 같은 질문을했고 URL을 만들기 위해 문자열을 계속 추가하고 싶지 않았습니다. 그래서 techhouse가 설명했듯이 $ .param을 사용하기 시작했습니다 .
또한 URL을 쉽게 생성 하는 URI.js 라이브러리 도 발견했습니다 . 도움이되는 몇 가지 예가 있습니다 : URI.js Documentation .
다음 중 하나입니다.

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"]);`