Form表單JSONContent-type解析

1 表單Form概述

在Form表單中，引數一般有：
    action    表單提交的url
    method    提交方式：post  get
    name      表單的屬性名
    enctype   提交資料的編碼格式

2 常見的編碼方式與語法

在Form表單中，enctype表明提交資料的格式 用 enctype 屬性指定將資料回發到伺服器時瀏覽器使用的編碼型別.
常見的編碼方式：

1  application/x-www-form-urlencoded:
概述: 當action為get，資料被編碼為名稱/值對,是標準的編碼格式，也是預設的編碼格式
格式：name1=value1&name2&value2  把form資料轉換成一個字串,然後把
這個字串append到url後面，用?分割，載入這個新的url

2  multipart/form-data:
概述：當action為post時，瀏覽器把form資料封裝到http body中，然後傳送到server。 如果沒有type=file的控
  件，用預設的application/x-www-form-urlencoded就可以了。 但是如果有type=file的話，就要用到
  multipart/form-data了。
  瀏覽器會把整個表單以控制元件為單位分割，併為每個部分加上ContentDisposition(form-
  data或者file),Content-Type(預設為text/plain),name(控制元件name)等資訊，並加上分割符(boundary)。
  file或者img等發生上傳檔案時，設定entype = `multipart/form-data`，是上傳二進位制資料，它告訴我們傳輸的
  資料要用到多媒體傳輸協議，由於多媒體傳輸的都是大量的資料，所以規定上傳檔案必須是post方法，<input>的
  type屬性必須是file。form裡面的input的值以2進位制的方式傳過去，所以request就得不到值了。

3 form表單提交方式

1  無重新整理頁面提交表單：表單可實現無重新整理頁面提交，無需頁面跳轉，如下，通過一個隱藏的iframe實現，form表單
的target設定為info，iframe的name名稱也為info，form提交目標位當前頁面iframe則不會重新整理頁面。

  <form action="/url.do" method="post" target="targetIfr">
  <input type="text" name="name"/>
  </form>   
  <iframe name="targetIfr" style="display:none"></iframe> 

2 通過type = submit 提交或者  <button type=`submit`> :一般表單提交通過type=submit實現，input 
type="submit",瀏覽器顯示為button按鈕，通過點選這個按鈕提交表單資料跳轉到/url.do
  <form action="/url.do" method="post">
     <input type="text" name="name"/>
     <input type="submit" value="提交">
  </form>

3 js提交form表單：js事件觸發表單提交，通過button、連結等觸發事件，js呼叫submit()方法提交表單資料，
    jquery通過submit()方法

  <form id="form" action="/url.do" method="post">
   <input type="text" name="name"/>
  </form>
  js: document.getElementById("form").submit()
  jquery: $("#form").submit()

4 ajax非同步提交表單資料 ：採用ajax非同步方式，通過js獲取form中所有input、select等元件的值，組成Json格式，
        通過非同步的方式與伺服器端進行互動，一般將表單資料傳送給伺服器端，伺服器端處理資料並返回結果資訊

  <form id="form"  method="post">
   <input type="text" name="name" id="name"/>
</form>
  var params = {"name", $("#name").val()}
 $.ajax({
      type: "POST",
      url: "/url.do",
      data: params,
      dataType : "json",
      success: function(respMsg){
        #處理函式
      }
   });

5 頁面無跳轉:如果通過form表單提交請求服務端去下載檔案，這時當前頁面不會發生跳轉，服務端返回void，通過
     response 去寫檔案資料，頁面會顯示下載檔案。
<form action="/url.do" method="post">
   <input type="text" name="name"/>
   <input type="submit" value="提交">
</form>

@RequestMapping(value = "/url")
    public void exportFile(HttpServletRequest req, HttpServletResponse response, String rptId)
            throws Exception {
        OutputStream out = null;
        try {
            String rptName = "file";
            String fileName = new String((rptName + excelAble.getFileSuffix()).getBytes("GBK"),
                    "8859_1");
            response.reset();
            response.setContentType("application/octec-stream");
            response.setHeader("Content-disposition", "attachment; filename=" + fileName);
            out = response.getOutputStream();
            excelAble.exportFile(out);
        } catch (Exception e) {
            logger.error(e);
        } finally {
            if (out != null) {
                out.close();
            }
        }
    }

6  form表單上傳檔案:使用form表單進行上傳檔案需要為form新增enctype="multipart/form-data" 屬性，除此之
外還需要將表單的提交方法改成post,如下 method="post", input type的型別需要設定為file.
<form action="/url.do" enctype="multipart/form-data" method="post">
     <input type="file" name="name"/>
     <input type="submit" value="提交">
</form>

4 Content-type介面應用

    一般的服務端語言如python，它們的 framework，都內建了自動解析常
見資料格式的功能。服務端通常是根據請求頭（headers）中的 Content-
Type 欄位來獲知請求中的訊息主體是用何種方式編碼，再對主體進行解析。
所以POST 提交，包含了 Content-Type 和訊息主體編碼方式兩部分。

Http Header裡的Content-Type一般有：
  application/x-www-form-urlencoded：資料被編碼為名稱/值對。這是標準的編碼格式
  multipart/form-data： 資料被編碼為一條訊息，頁上的每個控制元件對應訊息中的一個部分
  text/plain： 資料以純文字形式(text/json/xml/html)進行編碼，其中不含任何控制元件或格式字元
  application/json：作為響應頭Content-Type，用來告訴服務端訊息主
資料。

form的enctype屬性為編碼方式，常用有兩種：application/x-www-form-urlencoded和multipart/form-data，
預設為application/x-www-form-urlencoded。

5 json概述

JSON:JAVAScript Object Notation是一種輕量級的資料交換格式
大致分為三種情況：
1.｛｝ 解析`大括號`型別 
2. [ ] 解析是`中括號`型別 
3. 1與2的組合方法即"｛’name’:’李書豪’ ，’hobby’:[`程式設計`,`電競`,`睡覺`]｝"


//大括號物件型別object
jsonObj = {
  `name`:`lishu`，
  `age`:24
}

//陣列型別Array（陣列）
jsonArr = "[`beijing`，`shanghai`]"

//組合形式
jsonObj = {
  `name`:`lishu`，
  `age`:24，
  `friend`:{`name`:`zuoshou`，`age`:18}
}

JSON與Python預設型別轉化：
JSON        Python
object      dict
array       list
string      unicode
number      int
true        True
flase       Flase

6 json用法

匯入json  import json

JSON函式
json.dumps()   將 Python 物件編碼成 JSON 字串,類似編碼
json.loads()   將已編碼的 JSON 字串解碼為 Python 物件，類似解碼
將Python的字典結構匯出到json使用json.dumps() ，將json讀成Python的字典結構，使用json.loads()

json.dumps()   編碼json資料，常見的屬性列表
json.dumps(obj，ensure_ascii=True，encoding=`utf-8`，indent=4, separators=(`,`, `: `))

例：
data = [ { `a` : 1, `b` : 2, `c` : 3, `d` : 4, `e` : 5 } ]
json = json.dumps(data)
輸出json格式字串：[{"a": 1, "c": 3, "b": 2, "e": 5, "d": 4}]   #注意的單引號變成標準雙引號

#indent = 4 表示格式化資料
json.dumps({`a`: `Runoob`, `b`: 7}, sort_keys=True, indent=4, separators=(`,`, `: `))
輸出標準Json格式字串：
{
    "a": "Runoob",
    "b": 7
}

json.loads()  解碼json資料，常見屬性列表
例：
jsonData = `{"a":1,"b":2,"c":3,"d":4,"e":5}`;
text = json.loads(jsonData)

輸出結果：{u`a`: 1, u`c`: 3, u`b`: 2, u`e`: 5, u`d`: 4}

json資料格式的總結：
  1. json序列化方法：
          dumps：無檔案操作         dump：序列化+寫入檔案

  2. json反序列化方法：
          loads：無檔案操作         load： 讀檔案+反序列化

  3. json模組序列化的資料 更通用
      picle模組序列化的資料 僅python可用，但功能強大，可以序列號函式

  4. json模組可以序列化和反序列化的 
  5. 格式化寫入檔案利用  indent = 4