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