jQuery将.serialize()数据转换为JSON数据

前言

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

posted @ 2022-03-18 11:50  上海-悠悠  阅读(933)  评论(0)  编辑  收藏  举报