쿼리 문자열로 전달할 자바 스크립트 개체를 병합

쿼리 문자열로 전달할 자바 스크립트 개체를 병합

---

쿼리 문자열로 전달할 수 있도록 문자열로 병합해야하는 자바 스크립트 개체가 있습니다. 어떻게해야합니까? 즉 :

{ cost: 12345, insertBy: 'testUser' } 될 것이다 cost=12345&insertBy=testUser

이 호출에 jQuery AJAX 호출을 사용할 수 없습니다.이 호출을 사용할 수 있고 객체를 그대로 전달할 수 data있지만이 경우에는 전달할 수 없습니다. 하지만 jQuery를 사용하여 객체에 평면화하는 것은 괜찮습니다.

감사합니다.

---

원하는 jQuery.param:

var str = $.param({ cost: 12345, insertBy: 'testUser' });
// "cost=12345&insertBy=testUser"

data인수 로 전달 된 객체를 직렬화하기 위해 jQuery에서 내부적으로 사용하는 함수 입니다.

---

다음은 비 jQuery 버전입니다.

function toQueryString(obj) {
    var parts = [];
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            parts.push(encodeURIComponent(i) + "=" + encodeURIComponent(obj[i]));
        }
    }
    return parts.join("&");
}

---

내 ES6 버전 (순수 Javascript, jQuery 없음) :

function toQueryString(paramsObject) {
  return Object
    .keys(paramsObject)
    .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(paramsObject[key])}`)
    .join('&')
  ;
}

---

다음은 이미 해당 라이브러리 중 하나를 사용중인 경우 lodash 또는 밑줄을 사용하는 jQuery가 아닌 다른 버전입니다.

var toQueryString = function(obj) {
  return _.map(obj,function(v,k){
    return encodeURIComponent(k) + '=' + encodeURIComponent(v);
  }).join('&');
};

---

$.param()방법을 시도하십시오 .

var result = $.param({ cost: 12345, insertBy: 'testUser' });

---

이것은 오래된 질문이지만 Google 검색 상단에 있으므로 완전성을 위해 이것을 추가합니다.

1) jQuery를 사용하고 싶지 않지만 2) 중첩 객체를 쿼리 문자열 로 숨기고 싶다면 (Tim Down과 Guy의 답변을 바탕으로 작성) 다음을 사용하십시오.

function toQueryString(obj, urlEncode) {
    //
    // Helper function that flattens an object, retaining key structer as a path array:
    //
    // Input: { prop1: 'x', prop2: { y: 1, z: 2 } }
    // Example output: [
    //     { path: [ 'prop1' ],      val: 'x' },
    //     { path: [ 'prop2', 'y' ], val: '1' },
    //     { path: [ 'prop2', 'z' ], val: '2' }
    // ]
    //
    function flattenObj(x, path) {
        var result = [];

        path = path || [];
        Object.keys(x).forEach(function (key) {
            if (!x.hasOwnProperty(key)) return;

            var newPath = path.slice();
            newPath.push(key);

            var vals = [];
            if (typeof x[key] == 'object') {
                vals = flattenObj(x[key], newPath);
            } else {
                vals.push({ path: newPath, val: x[key] });
            }
            vals.forEach(function (obj) {
                return result.push(obj);
            });
        });

        return result;
    } // flattenObj

    // start with  flattening `obj`
    var parts = flattenObj(obj); // [ { path: [ ...parts ], val: ... }, ... ]

    // convert to array notation:
    parts = parts.map(function (varInfo) {
        if (varInfo.path.length == 1) varInfo.path = varInfo.path[0];else {
            var first = varInfo.path[0];
            var rest = varInfo.path.slice(1);
            varInfo.path = first + '[' + rest.join('][') + ']';
        }
        return varInfo;
    }); // parts.map

    // join the parts to a query-string url-component
    var queryString = parts.map(function (varInfo) {
        return varInfo.path + '=' + varInfo.val;
    }).join('&');
    if (urlEncode) return encodeURIComponent(queryString);else return queryString;
}

다음과 같이 사용하십시오.

console.log(toQueryString({
    prop1: 'x',
    prop2: {
        y: 1,
        z: 2
    }
}, false));

출력되는 내용 :

prop1=x&prop2[y]=1&prop2[z]=2

---

일반 JavaScript :

function toParam(obj) {
  var str = "";
  var seperator = "";
  for (key in obj) {
    str += seperator;
    str += enncodeURIComponent(key) + "=" + encodeURIComponent(obj[key]);
    seperator = "&";
  }
  return str;
}


toParam({ cost: 12345, insertBy: 'testUser' })
"cost=12345&insertBy=testUser"

---

다른 버전 :

function toQueryString(obj) {
    return Object.keys(obj).map(k => {
      return encodeURIComponent(k) + "=" + encodeURIComponent(obj[k])
    })
    .join("&");
}

---

var myObj = { cost: 12345, insertBy: 'testUser' },
    param = '',
    url   = 'http://mysite.com/mypage.php';    

for (var p in myObj) {
  if (myObj.hasOwnProperty(p)) {
    param += encodeURIComponent(p) + "=" + encodeURIComponent(myObj[p]) + "&";
  }
}

window.location.href = url + "?" + param;

---

당신은 이것을 사용할 수 있습니다

function serialize(obj)
{
    let str = []

    for(var p in obj)
    {
      if(obj.hasOwnProperty(p)) str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
    }

    return str.join('&')
}

이 링크 https://jsfiddle.net/yussan/kwmnkca6/ 에서 JSFiddle을 사용해보십시오.

---

Jrop의 답변 ES6 버전 (중첩 된 매개 변수도 구문 분석)

const toQueryString = (obj, urlEncode = false) => {
  if (!obj) return null;
  const flattenObj = (x, path = []) => {
    const result = [];
    Object.keys(x).forEach((key) => {
      if (!Object.prototype.hasOwnProperty.call(x, key)) return;
      const newPath = path.slice();
      newPath.push(key);
      let vals = [];
      if (typeof x[key] === 'object') {
        vals = flattenObj(x[key], newPath);
      } else {
        vals.push({ path: newPath, val: x[key] });
      }
      vals.forEach((v) => {
        return result.push(v);
      });
    });
    return result;
  };

  let parts = flattenObj(obj);
  parts = parts.map((varInfo) => {
    if (varInfo.path.length === 1) {
      varInfo.path = varInfo.path[0]; // eslint-disable-line no-param-reassign
    } else {
      const first = varInfo.path[0];
      const rest = varInfo.path.slice(1);
      varInfo.path = `${first}[${rest.join('][')}]`; // eslint-disable-line no-param-reassign
    }
    return varInfo;
  });

  const queryString = parts.map((varInfo) => {
    return `${varInfo.path}=${varInfo.val}`;
  }).join('&');
  if (urlEncode) {
    return encodeURIComponent(queryString);
  }
  return queryString;
};

참조 URL : https://stackoverflow.com/questions/5505085/flatten-a-javascript-object-to-pass-as-querystring