URL AJAX 요청을 위해 jQuery에서 문자열 인코딩


217

내 응용 프로그램에서 Google 빠른 검색을 구현하고 있습니다. 사용자가 텍스트 입력에 입력 할 때 HTTP 요청을 시작하고 싶습니다. 내가 가진 유일한 문제는 사용자가 성과 이름 사이의 공백에 도달하면 공백이로 인코딩되지 않아 +검색이 중단 된다는 것 입니다. 공백을으로 바꾸 +거나 문자열을 안전하게 URL 인코딩하는 방법은 무엇입니까?

$("#search").keypress(function(){       
    var query = "{% url accounts.views.instasearch  %}?q=" + $('#tags').val();
    var options = {};
    $("#results").html(ajax_load).load(query);
});

사용할 수 있습니다 $.param.
jpaugh

답변:


490

encodeURIComponent를 사용해보십시오 .

특정 문자의 각 인스턴스를 문자의 UTF-8 인코딩을 나타내는 1, 2, 3 또는 4 개의 이스케이프 시퀀스로 대체하여 URI (Uniform Resource Identifier) ​​구성 요소를 인코딩합니다 (두 개의 "서로 게이트"로 구성된 문자의 경우 이스케이프 시퀀스는 4 개임) "문자).

예:

var encoded = encodeURIComponent(str);

2
이렇게하면 내 문제가 해결되었습니다 .AJAX 요청에 매개 변수로 URL을 전달할 때 &에서 쿼리 문자열에 대한 & 다음에 URL이 모두 손실되었습니다. 이것을 추가하면 문제가 해결되었습니다. 감사!
TheJerm

21

encodeURIComponent가 제대로 작동합니다. 우리는 아약스 호출에서 이와 같은 URL을 줄 수 있습니다. 아래에 표시된 코드 :

  $.ajax({
    cache: false,
    type: "POST",
    url: "http://atandra.mivamerchantdev.com//mm5/json.mvc?Store_Code=ATA&Function=Module&Module_Code=thub_connector&Module_Function=THUB_Request",
    data: "strChannelName=" + $('#txtupdstorename').val() + "&ServiceUrl=" + encodeURIComponent($('#txtupdserviceurl').val()),
    dataType: "HTML",
    success: function (data) {
    },
    error: function (xhr, ajaxOptions, thrownError) {
    }
  });

9

더 좋은 방법:

encodeURIComponent 는 다음을 제외한 모든 문자를 이스케이프합니다.alphabetic, decimal digits, - _ . ! ~ * ' ( )

서버에 대한 예기치 않은 요청을 피하려면 URI의 일부로 전달 될 사용자 입력 매개 변수에서 encodeURIComponent를 호출해야합니다. 예를 들어, 사용자는 변수 설명에 "Thyme & time = again"을 입력 할 수 있습니다. 이 변수에 encodeURIComponent를 사용하지 않으면 comment = Thyme % 20 & time = again이됩니다. 앰퍼샌드와 등호는 새로운 키와 값 쌍을 표시합니다. 따라서 POST 주석 키가 "Thyme & time = again"과 동일한 대신 두 개의 POST 키가 있습니다. 하나는 "Thyme"과 같고 다른 하나는 다시 같습니다.

http://www.w3.org/TR/html401/interac...m-content-type 에 따라 application / x-www-form-urlencoded (POST)의 경우 공백은 '+'로 대체되어야합니다. "% 20"을 "+"로 추가로 바꾸면 encodeURIComponent를 대체 할 수 있습니다.

RFC 3986 (!, ', (,) 및 *를 예약)을보다 엄격하게 준수하려는 경우 이러한 문자에 정규화 된 URI 구분 사용이 없지만 다음을 안전하게 사용할 수 있습니다.

function fixedEncodeURIComponent (str) {
  return encodeURIComponent(str).replace(/[!'()]/g, escape).replace(/\*/g, "%2A");
}

1
For application/x-www-form-urlencoded (POST), per http://www.w3.org/TR/html401/interac...m-content-type, spaces are to be replaced by '+', so one may wish to follow a encodeURIComponent replacement with an additional replacement of "%20" with "+".어떻게합니까?
Vince Kronlein

1
그러나 이것이 유용하려면
URLdecode에

5

MVC3 / EntityFramework를 백엔드로 사용하고 있으며 프론트 엔드는 jquery를 통해 모든 프로젝트 컨트롤러를 사용하며 직접 ($ .post를 사용하여) 게시하면 URL 암호화 이외의 매개 변수를 직접 전달할 때 데이터 암호화가 필요하지 않습니다. 나는 이미 여러 문자를 테스트했으며 URL로 URL을 보냈습니다 (이 URL은 http://www.ihackforfun.eu/index.php?title=update-on-url-crazy&more=1&c=1&tb=1&pb=1 ) URL 내에서 모든 데이터를 전달할 때 encodeURIComponent가 훌륭하게 작동하더라도 전혀 문제가 없습니다 (하드 코딩 됨)

하드 코딩 된 URL 즉,>

 var encodedName = encodeURIComponent(name);
 var url = "ControllerName/ActionName/" + encodedName + "/" + keyword + "/" + description + "/" + linkUrl + "/" + includeMetrics + "/" + typeTask + "/" + project + "/" + userCreated + "/" + userModified + "/" + status + "/" + parent;; // + name + "/" + keyword + "/" + description + "/" + linkUrl + "/" + includeMetrics + "/" + typeTask + "/" + project + "/" + userCreated + "/" + userModified + "/" + status + "/" + parent;

그렇지 않으면 encodeURIComponent를 사용하지 말고 대신 ajax post 메소드 내에서 매개 변수를 전달하십시오.

 var url = "ControllerName/ActionName/";   
 $.post(url,
        { name: nameVal, fkKeyword: keyword, description: descriptionVal, linkUrl: linkUrlVal, includeMetrics: includeMetricsVal, FKTypeTask: typeTask, FKProject: project, FKUserCreated: userCreated, FKUserModified: userModified, FKStatus: status, FKParent: parent },
 function (data) {.......});

3
그것은 아마도 당시에 더 나은 해결책이었을 것입니다 :)
Brian D

0

이거 한번 해봐

var query = "{% url accounts.views.instasearch  %}?q=" + $('#tags').val().replace(/ /g, '+');

5
Anders Fjeldstad의 솔루션이 훨씬 좋습니다. 더하기 기호로 공백을 바꾸면 작동하지만 다른 문자 (움라우트 등)가 있으면 문제가 생길 수 있습니다.
Uku Loskit

1
@ Uku : OP는 공백을 +로 바꾸고 싶었으므로 어떻게 해야하는지 대답했습니다. encodeURIComponent는 그에게 % 20을주었습니다
창세기

2
@Uku가 옳다고 생각합니다. 이것이 문자 그대로의 질문에 답하지만 (확실히 작동합니다) @Anders의 솔루션은 더 큰 계획에서 더 낫다고 생각합니다.
브라이언 D
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.