jQuery序列化表单的方法总结（serialize()、serializeArray()）

最新推荐文章于 2024-09-16 21:59:14 发布
最新推荐文章于 2024-09-16 21:59:14 发布
阅读量6.9w 收藏 101
点赞数 24
分类专栏： jquery 文章标签： jquery html 表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinghuo0007/article/details/72654817
版权

我的个人博客开通了，地址：https://timewentby.com 欢迎访问

##jQuery序列化表单的方法总结

现在这里贴出案例中静态的html网页内容：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.2.1.js"></script>

</head>
<body>
    <form method="post" action="#" id="test_form">
        用户名：<input type="text" name="username"/><br>
        密 &nbsp; 码：<input type="password" name="password"><br>
        爱 &nbsp; 好：吃饭<input type="checkbox" name="hobby" value="eat" checked/> 睡觉<input type="checkbox" name="hobby" value="sleep"/><br/>
        性 &nbsp; 别：男 <input type="radio" value="man" name="sex" checked/> 女 <input type="radio" value="woman" name="sex"/><br/>
        学 &nbsp; 校： <select name="school">
                    <option value="yangguang">阳光小学</option>
                    <option value="xiwang">希望小学</option>
                    <option value="tiantian">天天小学</option>
                </select>
        <br><br><br>
        <input type="submit" value="提交"/> &nbsp;&nbsp;<input type="reset" value="重置" />
        <br> <br> <br>
        <input type="button" value="点我序列化为url" id="serializeUrl"/>&nbsp;&nbsp;<input type="button" value="点我序列化为json" id="serializeJson"/>
    </form>

</body>
</html>

###知识点一：serialize()

方法介绍：


	作用：序列表单内容为字符串。
	参数： 无
	返回值：表单内容的字符串格式

案例代码：

<script>
        $(function () {
            $("#serializeUrl").click(function () {
                testJquerySerializeUrl();
            });
        });
        
        function testJquerySerializeUrl() {
            var serializeUrl = $("#test_form").serialize();
            alert("序列化为url格式为："+serializeUrl);
        }

</script>

这里写图片描述

总结：

1.我们看到输出的结果为表单项中的各表单元素的name和value值
2.格式是以url参数的形式，第一个参数前面没有&符号

###知识点二：serializeArray()方法

方法介绍：

1.作用：序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
2.参数：无
3.返回值：返回的是JSON对象而非JSON字符串

4.返回格式为：
   [ 
     {name: 'firstname', value: 'Hello'}, 
     {name: 'lastname', value: 'World'},
     {name: 'alias'}, // this one was empty
  ]

案例：

  $(function () {
            $("#serializeUrl").click({"name":"zxy"},function () {
                testJquerySerializeUrl();
               // alert();
            });

            $("#serializeJson").click({},function () {
	             testJquerySerializeJson();
            });

        });
        
       
        function testJquerySerializeJson() {
            var serializeJson = $("#test_form").serializeArray();
            alert("序列化为json格式为："+JSON.stringify(serializeJson)); //JSON.stringify(json对象) 将json对象转化为json字符串
            
        }

结果为：
这里写图片描述

总结：

1.我们看到调用方法返回的是json对象
2.可是用JSON.stringify()方法将json对象转化为json字符串
xinghuo0007
关注
专栏目录
jQuery序列化form表单数据为JSON对象的实现方法
10-17
主要介绍了jQuery序列化form表单数据为JSON对象的实现方法,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
jquery.serializeJSON
01-05
form2json object needed: jquery form dom element var object = $('form').
【AJAX】Form-serialize插件的使用详解
最新发布
lph159的博客
09-16 2139
是一个帮助开发者快速处理HTML表单数据的插件，它可以将表单数据转换为JSON对象或URL编码字符串，特别适合与AJAX或表单提交结合使用。插件体积小、易于使用且与多种浏览器兼容，是处理表单数据的理想工具。URL 编码字符串（JSON 对象有时，您可能希望对某些字段的值进行自定义处理，提供了丰富的选项供开发者调整序列化的细节。
jQuery序列化表单
aohaoxing3762的博客
06-26 305
一、jQuery表单系列化 1、serialize() 描述：序列化表单内容为字符串,用于Ajax请求。 格式：var data = $(form).serialize();功能：将表单内容序列化成一个字符串。 2.serializeArray() 描述：序列化表单元素(类似'.serialize()'方法)返回JSON数据结构数据。 注意,此方法返回的是JSON对象而...
JQuery表单序列化
大话家的博客
04-18 801
JQuery表单序列化
jQuery表单序列化
weixin_30485291的博客
08-14 139
方法1：serialize(): 就是把表单信息序列化成一个字符串 （最常用 ） <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(doc...
jQuery——表单序列化
ShiZaolin的博客
02-20 238
$(“form”).serialize()：生成一个字符串，各参数用&拼接 $(“form”).serializeArray()：将参数生成一个拼接对象 案例: 创建登录servlet @WebServlet("/LoginServlet") public class LoginServlet extends HttpServlet{ protected void doGet(HttpSe...
jquery序列化表单以及回调函数的使用示例
10-25
**jQuery序列化表单** 序列化表单是将HTML表单的数据转换为URL编码的字符串，以便通过HTTP请求发送到服务器。在jQuery中，`serialize()`和`serializeArray()`是两个用于序列化表单的函数。 1. `serialize()`：这个...
jQuery序列化表单成对象的简单实现
10-21
jQuery的`serialize()`方法可以将表单中的所有输入元素（如文本框、复选框、单选按钮等）转换为URL编码的字符串，这种格式适合发送到服务器进行HTTP请求。然而，对于某些情况，例如EasyUI的datagrid，可能需要将表单...
jQuery中验证表单提交方式及序列化表单内容的实现
12-02
在jQuery中，表单提交和验证是...同时，`serializeArray()`方法提供了一种灵活的方式，便于处理和操作序列化的表单数据。在实际开发中，根据项目的特性和需求，合理选择和组合这些方法可以提高代码的效率和用户体验。
jQuery工具方法serialize()和serializeArray()
04-07
`serialize()`和`serializeArray()`是jQuery提供的一对非常实用的工具方法，主要用于处理表单数据。这两个方法在网页开发中尤其关键，因为它们能够方便地将用户在表单中输入的数据转化为适合发送到服务器的格式。 `...
jquery.serializejson.min.js
01-22
var dataJson = $("#formID").serializeJSON(); 可将form快速转化为json对象
jquery.serializeJSON.js
12-19
version 2.9.0 (Jan, 2018) jquery序列化插件，使用jquery.serializeJSON，可以在基于jQuery或者Zepto的页面中，调用 .serializeJSON() 方法来序列化form表单的数据成JS对象
AJAX无刷新上传文件并显示
07-15 1494
ajax图片上传，使用插件上传图片
Jquery表单序列化相关
qq_28626551的博客
10-09 196
在工作中，使用jquery中的serialize()方法序列化表单是一个较为不错的选择。 使用方法如下： $(selecter).serialize() 特别说明： 需要序列化的表单元素（或者整个表单form）必须咬有相应的name属性。 序列化结果： 使用serialize()方法得到的结果是一个外层为数组的json，如果你需要将其装换成一个外层为对象的json则需要用到以下代码：
jquery序列化表单并进行jquery.ajax提交
wj的博客
07-30 818
var formData = $('#eduplanForm').serialize(); //序列化为 a=1&amp;b=2这样的序列 console.log(); $.ajax({ url:contextPath + '/eduplan', ...
jquery 序列化form表单
weixin_30652271的博客
05-21 121
1.为什么要将form表单序列化？ ajax上传form表单的原始方式，是将form表单中所需要的键值对先获取，然后再组装成数据（两种方式：http:localhost:8080/test.do?personName=张三&sex=1 / json的格式），这种方式有大量的form表单中的数据要获取，序列化的方式，只用调用一个方法即可获取上述两种方式的数据。 2.使用jquery...
JQuery序列化表单值serializeToJson()、serialize()方法
05-26
JQuery 提供了两种序列化表单值的方法：serializeToJson() 和 serialize()。 serializeToJson() 方法可以将表单中的所有字段值序列化为一个 JSON 对象，该方法需要依赖 jQuery 库和 json2 库。 示例代码： ```javascript $.fn.serializeToJson = function () { var serializeObj = {}; $(this.serializeArray()).each(function () { serializeObj[this.name] = this.value; }); return serializeObj; }; ``` 使用方式： ```javascript var formJson = $("#form").serializeToJson(); console.log(formJson); ``` serialize() 方法可以将表单中的所有字段值序列化为一个 URL 编码的字符串，该方法只需要依赖 jQuery 库。 示例代码： ```javascript var formStr = $("#form").serialize(); console.log(formStr); ``` 使用方式： ```html <form id="form" method="post"> <input type="text" name="name" value="" /> <input type="text" name="age" value="" /> <button type="button" onclick="submitForm()">提交</button> </form> <script> function submitForm() { var formData = $("#form").serialize(); console.log(formData); // ... } </script> ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值