前言
使用 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种方式