前言
使用 jQuery 將頁面表單序列化獲取的數據是 key1=value1&key2=value2... 的格式，我們想傳 json 數據，需自己處理下。
.serialize()獲取表單數據
點提交按鈕，獲取表單數據
<!DOCTYPE html>
<html lang="en">
<head>
<link href="/static/bootstarp/css/bootstrap.min.css" rel="stylesheet">
<script src="/static/bootstarp/jquery/jquery.min.js"></script>
<script src="/static/bootstarp/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form action="" method="post" id="query_form">
<div class="form-group">
<label for="Email1">郵箱地址</label>
<input type="text" class="form-control" id="Email1" name="email" placeholder="Email">
</div>
<div class="form-group">
<label for="Password1">密碼</label>
<input type="password" class="form-control" id="Password1" name="password" placeholder="Password">
</div>
<input type="button" id="save" class="btn btn-info" value="提交">
</form>
</div>
</body>
<script>
$("#save").click(function(){
let data=$('form').serialize();//獲取值
console.log(data)
})
</script>
</html>
獲取到的數據內容:email=yoyo%40qq.com&password=123456,這種格式的數據發 post 請求的時候，請求頭部 contentType 類型是
contentType: "application/x-www-form-urlencoded; charset=utf-8"
接下來看下如何處理成json格式數據
轉 json 類型
如果我們想post請求發送json格式數據
contentType: "application/json; charset=utf-8"
可以寫個函數把key1=value1&key2=value2 ...轉成{"key1": "value1", "key2": "value2" ...}格式
<script>
// 將form.serialize() 轉json
function formToJson (data) {
data=data.replace(/&/g,"\",\"");
data=data.replace(/=/g,"\":\"");
data="{\""+data+"\"}";
return data;
}
$("#save").click(function(){
let data=$('form').serialize();//獲取值
console.log(data)
let json_data = formToJson (data)
console.log(json_data )
})
</script>
這樣就可以得到json數據的表單數據{"email":"yoyo%40qq.com","password":"123456"}
解決編碼問題
當有中文和特殊字符的時候，會看到不能正常顯示
可以使用decodeURIComponent() 函數進行解碼
語法
encodeURIComponent(uri)
參數uri 必須是一個字符串，含有 URI 組件或其他要編碼的文本。
<script>
// 將form.serialize() 轉json
function formToJson (data) {
data = decodeURIComponent(data) // 解碼
data=data.replace(/&/g,"\",\"");
data=data.replace(/=/g,"\":\"");
data="{\""+data+"\"}";
return data;
}
$("#save").click(function(){
let data=$('form').serialize();//獲取值
console.log(data)
let json_data = formToJson (data)
console.log(json_data )
})
</script>
於是可以得到正常的中文了
另外兩種表單序列化json的方法參考這篇python測試開發django-165.form表單序列化json的2種方式