Form表單 JSON Content-type解析


Form表單 JSON Content-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,用來告訴服務端消息主體是序列化后的 JSON 字符串,JSON 格式支持比鍵值對復雜得多的結構化數據。

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM