jQuery学习6_13 _jQuery序列化表单方法serialize()、serializeArray()

最新推荐文章于 2023-10-17 15:39:21 发布

原创最新推荐文章于 2023-10-17 15:39:21 发布 · 184 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jquery #学习 #javascript

这篇博客探讨了如何使用JavaScript的serialize()和serializeArray()方法将HTML表单数据序列化为字符串和JSON对象。示例代码展示了在表单中如何处理用户名、密码、爱好和性别的输入，并通过点击按钮触发序列化过程。点击'Url序列化'会弹出serialize()方法生成的字符串，而'json对象序列化'则会显示serializeArray()转换后的JSON对象。

注意事项：待序列化表单中的元素必须有name属性！

1.测试用例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script text="text/javascript" src="jquery-3.2.1.min.js"></script>
    <style>
        input{
            text-align: left;
        }
    </style>
</head>
<body>
    <form action="#" id="myform">
        用户名:<input type="text" name="username"><br>
        密码:<input type="password" name="password"><br>
        爱好:<input type="checkbox" name="hobbies" value="code">编程
            <input type="checkbox" name="hobbies" value="basket">篮球<br>
        性别:<input type="radio" name="sex" value="male">男
             <input type="radio" name="sex" value="famale">女<br>
        <input id="btn" type="submit" value="url序列化">
        <input id="btn1" type="submit" value="json对象序列化">
    </form>
</body>
</html>

2.测试serialize()

serialize()会将表单数据序列化为字符串，其返回值是表单内容的String形式

     <script>
          $("#btn").click(function(){
              var ret = $("#myform").serialize();
              alert(ret);
          })
    
     </script>

点击Url序列化，查看结果

3.测试serializeArray()

  <script>
          $("#btn").click(function(){
              var ret = $("#myform").serialize();
              alert(ret);
          })

          $("#btn1").click(function(){
             var ret = $("#myform").serializeArray();
             alert(JSON.stringify(ret));//将得到的JSON对象通过JSON.stringify()方法转化为String进行输出
          })
    </script>

点击json对象序列化，查看结果