[HTTP]를 + URL 매개 변수를 포함하는 HTTP 요청은 공백으로 해석됩니다

항목 : 각도 6

설명 : 데이터 에러를 제출하기 위해, + 기호가 공간으로 파싱 데이터 필드 제출 httpClient.post 메소드를 포함 사용시 인터페이스는 매개 변수를 전달

해결 방법 :

도 1에 도시 된 바와 같이, + 기호가 포함 된 HTTP 요청을 자동으로 공간 구문 분석되며, 이는 플러스 기호 '%의 2B'정상 데이터 제출 다음 테스트 코드로 대체해야

<! DOCTYPE HTML > 
< HTML > 
< 선두 > 
</ 헤드 > 
< 본문 > 
  < 입력 유형 = "텍스트" ID = "createResult"  /> 
  < 입력 유형 = "텍스트" ID = "staffName"  /> 
  < 입력 유형 = "텍스트 " ID ="staffNumber "  /> 
  < 입력 유형 ="텍스트 " ID ="staffSex "  /> 
  < /> 
  < 입력 타입 = "버튼" ID = "btnSave" 의 onclick = "BTN ()"   값 = "发送请求" /> 
  < 스크립트 > 
    함수 createXHR () {
       경우를 ( 대해서 typeof XMLHttpRequest의 ! =  ' 미정의 ' ) { 

        돌아가  새로운 XMLHttpRequest 객체 (); 
      } 다른  경우 ( 대해서 typeof ActiveXObject ! =  " 정의되지 않은 " ) { 

        경우 ( 대한 typeof arguments.callee를. " 문자열 " ) {
           VAR의 버전 = [ " MSXML2.XMLHTTP6.0 " , " MSXML2.XMLHTTP3.0 " , " MSXML2.XMLHTTP " , I 렌;
          위한 (I =  0 ; LEN = versions.lengthli < LEN; 내가 ++ ) {
             시도 {
               새로운 ActiveXObject (버전 [I]); 
              arguments.callee.activeString는 = 버전 [I];
              휴식 ; 
            }캐치 (예) {
               // 跳过
            } 
          } 
        } 
        반환  새 ActiveXObject (arguments.callee.activeString를); 
      } 다른 {
         던져  새로운 오류 ( " 无可用XHR을 " ); 
      } 
    } 

    함수 BTN () {
       VAR createResult = document.getElementById를 ( " createResult을 " );
      var에 데이터 =  " 이름 = "  + document.getElementById를 ( "staffName " ) .value.replace ( / \ + / g, " %의 2B ' )
         +  " 및 숫자 = "  + document.getElementById를 ( " staffNumber " ) .value.replace ( / \ + / g, " %의 2B ' )
         +  " & 성 = "  + document.getElementById를 ( " staffSex " ) .value.replace ( / \ + / g, " %의 2B ")
         +  "및 작업 = "  + document.getElementById를 ( " staffJob " ) .value.replace ( / \ + / g, " %의 2B ' )
       VAR의 요청 = createXHR (); 
      request.onreadystatechange =  함수 () {
         경우 (request.readyState = ==  4 ) {
           경우 (request.status의 ===  200 ) { 
            createResult.innerHTML = request.responseText; 
          } 다른 {
            경고 ( " 发生错误"  + request.status); 
          } 
        } 
      }; 
      request.open ( " POST " , " http://kjss.kuaijisishu.cn/expense.html?list&isArrearage1=&handleUserId=&field=id,stuNo,stuName,telphone,planclassesName,shouldPayFee,havePayFee,discountFee,returnFee,remainPayFee,lastPayDate , buildDate, returnState, handleUserName, licenseCode, 도메인 ORGNAME, " , 거짓 ); 
      request.setRequestHeader ( " Content-Type을 " , " 을 application / x-www-form은-urlencoded를 " ); 
      ; request.send (데이터) 
    } 
  </ 스크립트 > 
</ 몸 > 

</ HTML >

2, 때, AngularJS와 제출 번호 + % 2B를 교체하지만, 데이터는 여전히 제출 공간

따라서, 발견 된 각 소스 코드를 디버깅, HttpUrlEncodingCodec 코드, 데이터의 이러한 부분에 포함 다시 분석 :

  encodeKey (K : 문자열) : 문자열 {
         반환  이 함수 .encode (k)를; 
    } 
    encodeValue (V : 문자열) : 문자열 { 
        반환  이 함수 .encode을 (V); 
    } 

    개인 인코딩 (V : 문자열) : 문자열 { 
        반환 에 encodeURIComponent (V) 
        .replace ( / 40 % / GI, '@' ) 
        .replace ( ''/ %의 3A / GI, ) 
        .replace ( / 24 % / GI를 '$' ) 
        .replace ( / %의 2C / GI '' ) 
        .replace ( / % 3B / GI, ';' )
         .replace (/ % 2B / GI, '+') 
        .replace (/ %의 3D / GI, ';' ) 
        ./ % 3F / GI, '?' ) 
        .Replace ( / % 2 층 / GI '/' ); 
  }

 

3, 각 모양의 문제에 github에, 그것은 많은 사람들이 솔루션을 포함 동일한 문제를 가지고 있다는 것을 발견했다.

참조 : https://github.com/angular/angular/issues/11058

 

 

해결책 : 부호화 파라미터를 다시 작성 각도 (HttpUrlEncodingCodec)

// 의 + HTTP 요청 디스플레이 공간 문제를 해결하는 
(가) HttpUrlEncodingCodec 연장 GhQueryEncoder 클래스 { 
  encodeKey (K : 문자열) 문자열 { 
    K = super.encodeKey (K),
     리턴  이 본 .replaceCharacter (K)를; 
  } 
  encodeValue (V : 문자열) 문자열 { 
    V = super.encodeKey (V),
     리턴  이 본 .replaceCharacter (V)] 
  } 
  replaceCharacter (V) { 
    복귀 v.replace (/ \ + / GI '%의도 2b' ); 
  } 
}