머리말:
jquery ajax가 utf-8(페이지 utf-8, 수신 utf-8)로 인코딩되면 문제가 없습니다. 정상적으로 게시하고 얻을 수 있으며 페이지를 처리하여 올바른 콘텐츠를 직접 얻을 수 있습니다.
그러나 다음과 같은 경우에는
GBK -> AJAX POST ->GBK
UTF-8 -> AJAX POST ->GBK
뒤에 있는 코드가 올바른 콘텐츠를 가져올 수 없습니다. 일반적으로 이상한 문자를 얻으려면 물음표를 사용합니다.
기본 솔루션: 1: 송신 페이지와 수신 페이지 모두 UTF-8 인코딩을 사용합니다.
2: 전송 페이지에서 ajax 게시 메소드를 호출하기 전에 encodeURIComponent를 사용하여 중국어 콘텐츠가 포함된 입력을 한 번 인코딩하고, 수신 페이지에서는 디코딩 메소드(예: java.net.urldecoder.decode("Content received")를 호출합니다. ,"utf-8")).
그 중 첫 번째 방법은 의심할 여지 없이 가장 간단하고 직접적이지만 많은 프로젝트에서 utf-8 인코딩을 사용하지 않기 때문에 비현실적인 경우가 많습니다. 예를 들어 대부분의 국가에서는 gbk 인코딩을 사용하고 있습니다. 이러한 문제를 해결하는 것은 불가능합니다. 전체 프로젝트를 UTF-8 인코딩으로 변환하는 것은 비용이 너무 많이 들고 위험합니다.
두 번째 방법은 현재 대부분의 사람들이 사용하는 방법으로 흔히 2차 인코딩이라고 합니다. 왜 2차 인코딩이라고 부르는지는 나중에 설명하겠습니다. 클라이언트는 두 번 인코딩하고 서버는 두 번 디코딩합니다. 하지만 이 방법의 단점은 프론트엔드에서 한 번 코딩하고 백엔드에서 수동으로 디코딩한다는 점입니다. 주의하지 않으면 잊어버리게 되고, 코드가 프론트엔드 로직과 혼합됩니다.
상호작용 프로세스:
양식을 사용하여 기존 방식(AJAX가 아닌 제출)으로 게시하고 제출하는 경우 브라우저는 현재 페이지에 따라 인코딩하고 한 번 인코딩한 다음 서버로 보냅니다. 서버가 양식을 수신하면 자동으로 한 번 인코딩됩니다. 일반적으로 이 프로세스는 프로그램에 투명하므로 수동 인코딩 및 디코딩을 사용하면 위에서 언급한 보조 인코딩이 됩니다.
그러나 AJAX를 사용하여 제출하면 브라우저가 자동으로 인코딩하지 않으므로 jquery에 다음과 같은 코드가 있습니다.
ajax: function( s ) {
// 설정을 확장하되 's'를 다시 확장하여
// 나중에 다시 확인합니다(특히 테스트 스위트에서)
s = jQuery.extend(true, s, jQuery.extend(true, {}, jQuery.ajaxSettings, s))
var jsonp, jsre = /=?(&|$)/g, status, data,
type = s.type.toUpperCase()
// 문자열이 아닌 경우 데이터 변환
if ( s .data && s.processData && typeof s.data !== "string" )
s.data = jQuery.param(s.data)
.....
}
위는 jquery의 ajax 메소드 코드입니다. 다음은 jquery ajax post를 정상적으로 호출하는 코드입니다.
$.ajax({
url: ajaxurl,
type: 'POST',
dataType: 'html',
timeout: 20000 ,//Timeout 설정
data:para,//매개변수 설정
success: function(html){
}
})
위 코드를 통해 데이터가 설정되면 jquery가 내부적으로 jQuery.param 메서드를 호출하여 매개변수를 인코딩(브라우저에서 처리해야 하는 인코딩 수행)한다는 것을 알 수 있습니다.
jQuery.param=function( a ) {
var s = [ ];
function add( key, value ){
s[ s.length ] = encodeURIComponent(key) '=' encodeURIComponent(value)
// 배열이 전달된 경우
// 양식 요소의 배열이라고 가정합니다.
if ( jQuery.isArray(a) || a.jquery )
// 양식 요소 직렬화
jQuery .each( a, function(){
add( this.name, this.value );
});
// 그렇지 않으면 키/값 쌍의 객체라고 가정합니다. 🎜>else
// 키/값 직렬화
for ( var j in a )
// 값이 배열이면 키 이름을 반복해야 합니다
if ( jQuery .isArray(a[ j]) )
jQuery.each( a[j], function(){
add( j, this );
})
else
add( j, jQuery.isFunction (a[j]) ? a[j]() : a[j] )
// 결과 직렬화 반환
return s.join("&").replace(/ /g, " " );
}//jquery.param end
해결책:
encodeURIComponent는 utf-8로 인코딩됩니다. gbk 인코딩에서 gbk로 인코딩할 수 있나요?
아직 encodeURIComponent를 고려 중이라면 죄송합니다. encodeURIComponent는 utf-8만 인코딩할 수 있고 다른 인코딩을 위한 다른 API는 없습니다. 하지만 걱정하지 마세요. 아래를 살펴보세요.
encodeURIComponent는 중국어, 한국어 등 특수 문자를 utf-8 형식의 URL 인코딩으로 변환합니다.
escape0~255 이외의 유니코드 값을 인코딩할 경우 %u**** 형식이 출력되며 그 외의 경우 escape, encodeURI, encodeURIComponent의 인코딩 결과는 동일합니다. .
하하, 희망이 보이시나요? 맞습니다. encodeURIComponent 메서드 대신 escape를 사용하세요. 하지만 주의해야 할 점은 다음과 같습니다.
escape인코딩되지 않은 문자는 69개입니다: *, ,-,.,/,@,_,0-9,a-z,A-Z
encodeURIComponent 71개의 인코딩되지 않은 문자가 있습니다: !, ', (,), *, -, ., _, ~, 0-9, a-z, A-Z
escape를 사용한 후에는 더하기 기호를 인코딩해야 합니다. 그렇지 않으면 콘텐츠에 더하기 기호가 포함된 경우 서버에 의해 공백으로 변환됩니다.
드디어 해결책을 알았습니다. jquery 코드를 다시 작성하세요.
jQuery.param=function( a ) {
var s = [ ]
var encode=function(str){
str=escape(str); str.replace( / /g,"%u002B");
return str;
}
function add( key, value ){
s[ s.length ] = encode(key) '=' encode (value);
};
// 배열이 전달된 경우
// 양식 요소의 배열이라고 가정합니다.
if ( jQuery.isArray(a) || a.jquery )
// 양식 요소 직렬화
jQuery.each( a, function(){
add( this.name, this.value );
}); >// 그렇지 않으면 키/값 쌍의 객체라고 가정
else
// 키/값 직렬화
for ( var j in a )
// 값이 다음과 같은 경우 배열이면 키 이름을 반복해야 합니다.
if ( jQuery.isArray(a[j]) )
jQuery.each( a[j], function(){
add( j, this ) ;
}) ;
else
add( j, jQuery.isFunction(a[j]) ? a[j]() : a[j] )// 결과 직렬화를 반환합니다.
return s.join("&").replace(/ /g, " ");
}
위 코드는 jquery 소스 파일에서 다시 작성할 필요가 없습니다. . 원래 메서드를 덮어쓰려면 javascript를 붙여넣어 프로젝트에 추가할 수 있지만 jquery가 로드된 후에야 합니다.
사전 검증 결과 위 코드는 유니코드로 인코딩되었기 때문에 UTF-8 인코딩에서도 정상적으로 작동할 수 있습니다.
이렇게 하면 프런트엔드와 백엔드 모두에 영향을 미치는 보조 인코딩을 사용할 필요가 없습니다. gbk 인코딩 하의 Ajax 포스트는 더 이상 문제가 되지 않습니다. 이것이 궁극적인 해결책입니다. 하하.
관심 있는 분들은 http://www.open-lib.com/Forum/Read_69_1.action에 접속하여 저자와 소통하실 수 있습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
