POST 제출 데이터 의 --- Content - Type 의 이해;

14646 단어 http
Content - type 은 http / https 가 서버 에 정 보 를 보 낼 때의 콘 텐 츠 인 코딩 형식 을 말 하 며, contentType 은 데이터 흐름 을 보 내 는 유형 을 나타 내 는 데 사용 되 며, 서버 는 인 코딩 형식 에 따라 특정한 해석 방식 을 사용 하여 데이터 흐름 의 데 이 터 를 가 져 옵 니 다.
네트워크 요청 에 자주 사용 되 는 Content - type 은 text / html, text / plain, text / css, text / javascript, image / jpeg, image / png, image / gif, application / x - www - form - urlencoded, multipart / form - data, application / json, application / xml 등 이 있 습 니 다.
그 중에서 text / html, text / plain, text / css, text / javascript, image / jpeg, image / png, image / gif 는 흔히 볼 수 있 는 페이지 자원 유형 입 니 다.
application / x - www - form - urlencoded, multipart / form - data, application / json, application / xml 이 네 가 지 는 ajax 의 요청, 폼 제출 또는 파일 업로드 에 자주 사용 되 는 자원 형식 입 니 다.
form 폼 에서 enctype 속성 을 정의 할 수 있 습 니 다. 이 속성 은 서버 에 보 내기 전에 폼 데 이 터 를 어떻게 인 코딩 해 야 하 는 지 를 의미 합 니 다.기본적으로 폼 데 이 터 는 "application / x - ww - form - unlencoded" 로 인 코딩 됩 니 다.
enctype 에서 자주 사용 하 는 속성 값 은 다음 과 같 습 니 다. application / x - www - form - unlencoded: 보 내기 전에 모든 문 자 를 인 코딩 합 니 다 (기본 값).multipart / form - data, 문자 인 코딩 이 아 닙 니 다.파일 업로드 시 이 값 을 사용 합 니 다.
1. application / x - www - form - urlencoded 는 주로 다음 과 같은 데 사 용 됩 니 다. 1.1: 가장 흔히 볼 수 있 는 POST 제출 데이터 방식 입 니 다.1.2: 원생 form 의 기본 제출 방식 (enctype 으로 제출 데이터 형식 을 지정 할 수 있 습 니 다).1.3: jquery, zepto 등 기본 post 가 제출 을 요청 하 는 방식 입 니 다.
1. 먼저 form 폼 에서 post 기본 제출 방식 의 데 이 터 를 살 펴 봅 니 다.코드 는 다음 과 같 습 니 다:




  
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>


  <div id="app">
    <form action="http://www.example.com" method="POST">
      <p>username: <input type="text" name="fname"/></p>
      <p>age: <input type="text" name="age"/></p>
      <input type="submit" value="  "/>
    </form>
  </div>

</code></pre> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p>     :</p> 
  <p><img alt="" src="https://s1.md5.ltd/image/e5066e730f7eb54593b566daf2b12723.jpg" width="0" height="0" class="check_url_is_full"/></p> 
  <p>application/x-www-form-urlencoded              ,  GET/POST   ,             key1=value1&key2=value2<br/>    ,           utf-8  ,       %20;</p> 
  <p>         application/x-www-form-urlencoded        , chrome network   ,           。   formData   ;</p> 
  <p>     ajax      ;</p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <pre><code>


  <title/>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
  <script type="text/javascript" src="https://tugenhua0707.github.io/html5UploadImage/js/jquery.js"/>


  <div id="app">
    <div class="btn">  post  </div>
  </div>

  <script>
    var obj = {
      "name": 'CntChen',
      "info": 'Front-End',
    };
    $('.btn').click(function() {
      $.ajax({
        url: 'www.example.com',
        type: 'POST',
        dataType: 'json',
        data: obj,
        success: function(d) {
          
        }
      })
    });
  </script>

</code></pre> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p>     :</p> 
  <p><img alt="" src="https://s1.md5.ltd/image/a52ecb07e077839f65ffaae93c9956c0.jpg" width="0" height="0" class="check_url_is_full"/></p> 
  <p>        contentType  application/x-www-form-urlencoded,             :<br/> username=111&age=2;</p> 
  <p>      type GET  ,               url       ;        POST,             http body Form Data   。</p> 
  <p><strong> :multipart/form-data</strong><br/>          ,        enctype     multipart/form-data.           ,      --boundary  ;</p> 
  <p>html    :</p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <pre><code>


  <title/>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>


  <div id="app">
    <form action="http://www.example.com" method="POST" enctype="multipart/form-data">
      <p>username: <input type="text" name="fname"/></p>
      <p>age: <input type="text" name="age"/></p>
      <input type="submit" value="  "/>
    </form>
  </div>

</code></pre> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p>     :</p> 
  <p><img alt="" src="https://s1.md5.ltd/image/91d9a95296ef2de61165b295e961d52a.jpg" width="0" height="0" class="check_url_is_full"/></p> 
  <p>ajax formdata          </p> 
  <p><strong> :application/json</strong><br/>  http   ,ContentType       application/x-www-form-urlencoded,           :name/value  ,<br/>       &  , name value      =   ,   key=xxx&name=111&password=123456;                  ,<br/>      json  ,    :</p> 
  <pre><code>{
  a: 1,
  b: 2
}</code></pre> 
  <p>      a=1&b=2   ,           ,          json  ,             ,      :</p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <pre><code>{
  obj: [
    {
      "name": 111,
      "password": 22
    }
  ]
}</code></pre> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p>       ,application/x-www-form-urlencoded        ,       obj[0]['name']=111&obj[0].['password']=2   。<br/>      json  ;</p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <pre><code>{
  "obj": [
    {
      "name": 111,
      "password": 22
    }
  ]
}</code></pre> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p>           ,           ,    application/json     ,          application/json。         application/json  ,     application/x-www-form-urlencoded    ,              ,<br/>       json  ,           json    ,           ,    json      ,         。</p> 
  <p>  json            。json                     ,                。</p> 
  <p>    :</p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <pre><code>


  <title/>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
  <script type="text/javascript" src="https://tugenhua0707.github.io/html5UploadImage/js/jquery.js"/>


  <div id="app">
    <div class="btn">  post  </div>
  </div>

  <script>
    $('.btn').click(function() {
      $.ajax({
        url: 'http://www.example.com',
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify({a: [{b:1, a:1}]}),
        success: function(d) {
          
        }
      })
    });
  </script>

</code></pre> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p>      ,       ,     ,         :</p> 
  <p><img alt="" src="https://s1.md5.ltd/image/1964c419d83a3d0d9fa8bcfeb2095fed.jpg" width="0" height="0" class="check_url_is_full"/></p> 
  <p><img alt="" src="https://s1.md5.ltd/image/3cb8b7fcdd43e267f288f1220ddd8b1a.jpg" width="0" height="0" class="check_url_is_full"/></p> 
  <p><strong>3.1   ajax     ContentType: application/json</strong></p> 
  <p>   ajax     ,    Header ContentType  application/json,       ,     Method OPTIONS       ,<br/>                   (  GET,POST) 。            ,         ,           ,         。         demo,      :</p> 
  <p>     :</p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <pre><code>


  <title/>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
  <script type="text/javascript" src="https://tugenhua0707.github.io/html5UploadImage/js/jquery.js"/>


  <div id="app">
    <div class="btn">  post  </div>
  </div>

  <script>
    $('.btn').click(function() {
      $.ajax({
        url: 'http://localhost:8081/api.json',
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify({a: [{b:1, a:1}]}),
        success: function(d) {
          
        }
      })
    });
  </script>

</code></pre> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p><img alt="" src="https://s1.md5.ltd/image/51e409b11aa51c150090697429a953ed.gif" width="0" height="0" class="check_url_is_full"/></p> 
  <p>     :</p> 
  <p><img alt="" src="https://s1.md5.ltd/image/6cefa2f96b4c17568e5f81f35b8b6ddd.jpg" width="0" height="0" class="check_url_is_full"/></p> 
  <p>        json           Request Payload;</p> 
 </div> 
</div>
                            </div>
                        </div>

좋은 웹페이지 즐겨찾기