Js는 왜곡된 중국어 매개변수를 배경으로 전달하기 위해 URL을 어떻게 사용합니까?

一个新手
풀어 주다: 2017-09-22 10:23:43
원래의
2171명이 탐색했습니다.

프런트엔드가 백엔드에서 해당 URL을 요청할 때 매개변수를 백엔드에 전달하기 위해 URL에 이 URL을 사용하는 경우가 많습니다. 그러나 매개변수가 중국어로 되어 있으면 왜곡되는 문제가 발생합니다. URL에 매개변수를 전달할 때 문자가 깨졌을 때 해결 방법을 자세히 설명하는 시나리오를 생각해 보겠습니다.


페이지에 입력 상자와 제출 버튼이 있다고 가정해 보겠습니다. 제출 버튼을 클릭하면 사용자가 입력 상자에 입력한 값을 가져온 다음 URL을 사용하여 매개변수를 전달합니다. 입력 상자의 값을 전달하려면 무대 뒤로 가세요. 백엔드는 웹 레이어 처리 기술에 해당하며 데이터 처리를 위해 Struts2 Action을 사용한다고 가정합니다. Action에서 처리되는 데이터의 URL은 /say라고 가정합니다. 구체적인 페이지 긴급 요청 액션 코드는 다음과 같습니다.

html 코드:


<input type="text" id="name" name="name" value="${user.name}" />
<button id="sub" onclick="sub()">提交</button>
javascript代码:
<script type="text/javascript">
function sub(){
var name = document.getElementById("name").value;①
 window.location = "sayHello?user.name=" + name;②
}
</script>
로그인 후 복사

위 코드는 먼저 name이라는 id를 가진 입력 상자에서 입력 상자의 값을 가져온 후 window.localtion을 사용하여 sayHello라는 URL로 액션을 요청합니다. 여기서 액션 이후에는 key=value 형식이 사용되고, 들어오는 매개변수가 사용되고, 들어오는 입력 상자의 값은 Struts2 메커니즘에 따라 사용되어 name 속성을 업데이트합니다. 배경 사용자 엔터티.

URL 인코딩 및 디코딩 원칙:

URL을 사용하여 매개변수를 전달하는 방식은 브라우저 환경, 즉 URL에 포함된 각 키=값 형식의 URL과 키-값 쌍 매개변수는 다음과 같습니다. 브라우저 주소 표시줄의 처리 원리는 해당 인코딩을 처리한 다음 디코딩을 위해 백그라운드로 전달합니다.

아무 처리도 수행하지 않았기 때문에 JavaScript가 URL을 요청하고 중국어 매개변수를 전달할 때(즉, 입력 상자에 중국어를 입력하는 경우) URL의 중국어 매개변수가 브라우저 메커니즘에 따라 인코딩됩니다. 이때 인코딩이 깨지는 문제가 있습니다.

입력 상자에 입력된 내용이 "test"라는 단어이고, 백그라운드 Action에서 수신한 매개변수 값이 왜곡되어 있다고 가정해 보겠습니다. 자바스크립트로 인코딩하려면 encodeURI() 메서드를 사용하세요.

1. encodeURI()를 사용하여 자바스크립트에서 중국어 URL 매개변수를 인코딩하면 "test"라는 단어가 "%E6%B5%8B%E8%AF%95"

2로 변환됩니다. "%"는 이스케이프 문자로 간주되며 브라우저는 주소 표시줄 URL에 전달된 변환된 매개변수 "%"와 "%" 사이의 이스케이프 문자를 처리하여 백그라운드 작업에 전달합니다. 이로 인해 encodeURI()로 인코딩된 실제 URL과 불일치가 발생합니다. 브라우저가 "%"를 이스케이프 문자로 잘못 인식하고 "%"를 일반 문자로 간주하지 않기 때문입니다.

3. encodeURI()로 변환된 URL이 브라우저에서 정상적으로 처리되기 위해서는 encodeURI()로 인코딩된 RUL이 외부 레이어에서 encodeURI()로 다시 처리되어야 합니다. 이 처리 encodeURI()는 브라우저에서 이스케이프 문자로 구문 분석된 인코딩된 URL의 "%"를 다시 인코딩하여 일반 문자로 변환합니다.

4. 정상적인 처리 후 이전 자바스크립트 코드의 ②에 있는 코드는

입니다.

window.location = encodeURI(encodeURI("sayHello?user.name=" + 이름));

5. 처리된 URL은 더 이상 encodeURI()에서 "%E6%B5%8B%E8%AF%95"로 변환한 문자열이 아닙니다. "%25E6%B255%258B%25E8%AF%2595" 문자열은 이전 단계에서 탐색 및 구문 분석된 원본 문자열을 다시 인코딩하여 두 단계의 encodeURI() 처리를 거쳐 URL로 처리됩니다. 이스케이프 문자 "%"가 다시 인코딩되어 "%25"로 변환된 일반 문자로 변환됩니다.

이제 프런트엔드 자바스크립트 코드는 URL을 한자로 인코딩하는 것을 완료했으며 URL을 통해 백그라운드 Action에 매개변수를 전달하여 처리를 기다립니다. Action은 정상적인 변환을 얻었고 잘못된 매개변수는 없습니다. % 25E6%B255%258B%25E8%AF%2595", 이 문자열에 해당하는 중국어는 정확히 우리가 입력한 "test"라는 단어입니다.

Action은 이러한 문자열을 처리할 수 없습니다. 이는 프런트 엔드에서 입력한 소스 데이터 "테스트"가 아니라 encodeURI()로 두 번 인코딩된 문자열이기 때문입니다. 따라서 프런트엔드에서 인코딩된 매개변수 문자열을 디코딩하려면 백엔드에서 API를 사용해야 합니다. 해당 디코딩 API는 URLDecoder.decode(user.getName(), "UTF-8")입니다.

URLDecoder의 decode(String str, String ecn) 메소드에는 두 개의 매개변수가 있습니다. 첫 번째 매개변수는 디코딩할 문자열이고, 두 번째 매개변수는 디코딩 시 해당 인코딩입니다. 백그라운드에서 이 API를 사용하여 디코딩하는 데 사용하는 코드는 다음과 같습니다.

URLDecoder.decode(user.getName(),"UTF-8");

요약:

이 시점에서 URL 완성 수신 중국어 매개변수의 문자 깨짐 문제는 대략 다음 단계로 나눌 수 있습니다.

1. encodeURI()를 사용하여 javascript

2에서 URL의 중국어 매개변수를 두 번 인코딩합니다. . 백그라운드에서 프런트 엔드에서 encodeURI()로 인코딩된 문자열을 가져오고 decode(String)를 사용합니다. str, String ecn)을 디코딩하는 방법

위 내용은 Js는 왜곡된 중국어 매개변수를 배경으로 전달하기 위해 URL을 어떻게 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿