[javascript] 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"