[javascript] URL에서 JSON 문자열을 이스케이프하는 방법은 무엇입니까?

Program / 글쓴이

Javascript를 사용하여 페이지에 대한 링크를 생성하고 싶습니다. 페이지에 대한 매개 변수는 JSON으로 직렬화하는 Javascript 배열에 있습니다.

그래서 다음과 같은 URL을 생성하고 싶습니다.

http://example.com/?data="MY_JSON_ARRAY_HERE"

URL에 매개 변수로 포함하기 위해 JSON 문자열 (직렬화 된 배열)을 어떻게 이스케이프해야합니까?

JQuery를 사용하는 솔루션이 있다면 그것을 좋아할 것입니다.

참고 : 예, 페이지에 대한 매개 변수가 많기 때문에 배열에 있어야합니다. 나중에 링크를 줄이기 위해 bit.ly를 사용할 것 같습니다.

답변

encodeURIComponent(JSON.stringify(object_to_be_serialised))

답변

를 사용하여 encodeURIComponent쿼리 문자열의 일부를 안전하게 URL 인코딩 할 수 있습니다 .

var array = JSON.stringify([ 'foo', 'bar' ]);
var url = 'http://example.com/?data=' + encodeURIComponent(array);

또는 이것을 AJAX 요청으로 보내는 경우 :

var array = JSON.stringify([ 'foo', 'bar' ]);
$.ajax({
    url: 'http://example.com/',
    type: 'GET',
    data: { data: array },
    success: function(result) {
        // process the results
    }
});

답변

저도 같은 일을하려고했습니다. 나에게 문제는 내 URL이 너무 길어 졌다는 것입니다. 오늘 Bruno Jouhier의 jsUrl.js 라이브러리를 사용하여 솔루션을 찾았습니다 .

아직 철저히 테스트하지 않았습니다. 그러나 다음은 3 가지 다른 방법을 사용하여 동일한 대형 객체를 인코딩 한 후 문자열 출력의 문자 길이를 보여주는 예입니다.

  • 2651 자 사용 jQuery.param
  • 1691 자 사용 JSON.stringify + encodeURIComponent
  • 821 자 사용 JSURL.stringify

분명히 JSURL은 js 객체를 urlEncoding하는 데 가장 최적화 된 형식을 가지고 있습니다.

https://groups.google.com/forum/?fromgroups=#!topic/nodejs/ivdZuGCF86Q 의 스레드는
인코딩 및 파싱에 대한 벤치 마크를 보여줍니다.

참고 : 테스트 후 jsurl.js 라이브러리가 Object.keys, Array.map 및 Array.filter와 같은 ECMAScript 5 함수를 사용하는 것처럼 보입니다. 따라서 최신 브라우저 (예 : 8 이하)에서만 작동합니다. 그러나 이러한 기능에 대한 polyfill은 더 많은 브라우저와 호환되도록합니다.

답변

사용 encodeURIComponent():

var url = 'index.php?data='+encodeURIComponent(JSON.stringify({"json":[{"j":"son"}]})),

답변

이상한 대안을 제시하겠습니다. 때로는 다른 인코딩을 사용하는 것이 더 쉽습니다. 특히 URL 인코딩의 세부 사항을 모두 동일한 방식으로 처리하지 않는 다양한 시스템을 다루는 경우 더욱 그렇습니다. 이것은 가장 일반적인 접근 방식은 아니지만 특정 상황에서 유용 할 수 있습니다.

데이터를 URL로 인코딩하는 대신 base64로 인코딩 할 수 있습니다. 이것의 장점은 인코딩 된 데이터가 매우 일반적이며 알파 문자와 때로는 후행으로 만 구성된다는 것입니다 =. 예:

JSON 문자열 배열 :

["option", "Fred's dog", "Bill & Trudy", "param=3"]

해당 데이터는 data매개 변수 로 URL 인코딩됩니다 .

"data=%5B%27option%27%2C+%22Fred%27s+dog%22%2C+%27Bill+%26+Trudy%27%2C+%27param%3D3%27%5D"

동일, base64 인코딩 :

"data=WyJvcHRpb24iLCAiRnJlZCdzIGRvZyIsICJCaWxsICYgVHJ1ZHkiLCAicGFyYW09MyJd"

base64 접근 방식은 조금 더 짧을 수 있지만 더 중요한 것은 더 간단합니다. 일반적으로 따옴표, 포함 된 %기호 등 으로 인해 cURL, 웹 브라우저 및 기타 클라이언트간에 URL 인코딩 데이터를 이동하는 데 문제가 있습니다 . Base64는 특수 문자를 사용하지 않기 때문에 매우 중립적입니다.

답변

Delan의 답변은 완벽합니다. 추가하기 만하면됩니다. 누군가가 매개 변수의 이름을 지정하거나 여러 JSON 문자열을 개별적으로 전달하려는 경우 아래 코드가 도움이 될 수 있습니다!

JQuery

var valuesToPass = new Array(encodeURIComponent(VALUE_1), encodeURIComponent(VALUE_2), encodeURIComponent(VALUE_3), encodeURIComponent(VALUE_4));

data = {elements:JSON.stringify(valuesToPass)}

PHP

json_decode(urldecode($_POST('elements')));

도움이 되었기를 바랍니다!

답변