jQuery - serialize() 方法

分手后的思念是犯贱 2024-02-17 17:41 20阅读 0赞

**一、定义：**

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。

您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。  
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

**二、语法：$(selector).serialize()**

**三、如何使用：**

（1）单击按钮提交数据

<body>
    <form>
    姓名: <input type="text" name="uname" value="John" /><br />
    密码: <input type="text" name="upass" value="123456" /><br />
    </form>
    
    <button>序列化表单值</button>
    <div></div>
    </body>

<script type="text/javascript" src="jquery-1.8.3.js"></script>
    $(function(){	
    	//点击按钮
    	$("button").click(function(){
    		//必须指定表单标签
    	  $("div").html($("form").serialize());	
    		
       });
    	
    	 
     });
    </script>

效果图:

![Center][]

（2）整个表单提交数据

<body>
    <form>
      <div>姓名<input type="text" name="a" value="1" id="a" /></div>
      <div>年龄<input type="text" name="b" value="2" id="b" /></div>
      <div><input type="hidden" name="c" value="3" id="c" /></div>
      <div>
        备注<textarea name="d" rows="5" cols="30">4</textarea>
      </div>
      <div>城市<select name="e">
        <option value="5" selected="selected">上海</option>
        <option value="6">天津</option>
        <option value="7">北京</option>
      </select></div>
      <div>
       是否同意 <input type="checkbox" name="f" value="8" id="f" />
      </div>
      <div>
        <input type="submit" name="g" value="提交" id="g" />
      </div>
      
    <div id="result"></div>
    </form>
    </body>

<script type="text/javascript" src="jquery-1.8.3.js"></script>
    
    <script type="text/javascript">
    //比如 <input>, <textarea> 以及 <select>。不过，选择 <form> 标签本身进行序列一般更容易些：
    //注释：只会将"成功的控件"序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性

$(function(){
    	 //表单提交
        $("form").submit(function(){
    		//指定当前对象序列化
    	 $("#result").html($(this).serialize());
    	   return false;	
    		
        });
    
    	 
     });
    </script>

效果图：

![Center 1][]

[Center]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/44c363fda3c14ac08fa7650be084da6f.png
[Center 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/4650975154fa432ab2021e01fc2043f9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery - serialize() 方法

一、定义： serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。您可以选择一个或多个表单元素（比如 input 及/或文本框），或者 form

分手后的思念是犯贱/ 2024年02月17日 17:41/ 0 赞/ 21 阅读

相关 jQuery中的serializer序列化—炒鸡好用

jQuery.serializer()序列化 serialize()函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。 serialize()函数常用

不念不忘少年蓝@/ 2023年08月17日 17:45/ 0 赞/ 239 阅读

相关 JQuery中serialize()用法实例分析

`serialize()`函数用于序列化一组表单元素，将表单内容编码为用于提交的字符串。 `serialize()`函数常用于将表单内容序列化，以便用于AJAX提交。该函

末蓝、/ 2022年10月01日 03:58/ 0 赞/ 311 阅读

相关使用Jquery serialize序列化Form表单

HTML代码 <form> <div class="login-screen"> <div class="login-form">

﹏ヽ暗。殇╰゛Y/ 2022年07月30日 14:27/ 0 赞/ 474 阅读

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

我的个人博客开通了，地址：[https://timewentby.com][https_timewentby.com] 欢迎访问 \\jQuery序列化表单的方法总结现在

「爱情、让人受尽委屈。」/ 2022年06月15日 04:13/ 0 赞/ 321 阅读

相关 jQuery ajax()使用serialize()提交form数据

jQuery的serialize()方法通过序列化表单值，创建URL编码文本字符串，我们就可以选择一个或多个表单元素，也可以直接选择form将其序列化，如： <for

红太狼/ 2022年05月30日 10:18/ 0 赞/ 307 阅读

相关 jQuery序列化表单数据 serialize()、serializeArray()及使用

1、 serialize() 方法：　　serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。　　您可以选择一个或多个表单元素（比如 input

谁践踏了优雅/ 2022年03月30日 14:24/ 0 赞/ 329 阅读

相关 jquery serializeArray()、serialize() 增加数据

一、提交表单时添加参数 1、\serializeArray var dataParam = $("\form1").serializeArray(); //添加age="

你的名字/ 2022年03月25日 20:50/ 0 赞/ 460 阅读

相关 jQuery积累：serialize()、stringify()、toJSON()

\）表单serialize()序列化，和serializeArray() \\）应用场景　　当Ajax或者get请求发送表单中的某一个，或者某几个值到后台时，通过jQue

旧城等待，/ 2021年12月01日 10:58/ 0 赞/ 329 阅读

相关 jQuery serialize()、serializeArray()方法实现表单序列化

serialize() serialize()方法作用于一个JQuery对象，它能够将DOM元素内容序列化为字符串。与JQuery中其他方法一样，serialize

冷不防/ 2021年06月24日 16:11/ 0 赞/ 472 阅读