jQuery-serialize()输出序列化form表单值的方法

实例
输出序列化表单值的结果：


代码如下:

$("button").click(function(){
$("div").text($("form").serialize());
});

定义和用法
serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。
您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

语法


代码如下:

$(selector).serialize()

详细说明
.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。

表单元素有几种类型：


代码如下:

<form>
<div><inputtype="text"name="a"value="1"id="a"/></div>
<div><inputtype="text"name="b"value="2"id="b"/></div>
<div><inputtype="hidden"name="c"value="3"id="c"/></div>
<div>
<textareaname="d"rows="8"cols="40">4</textarea>
</div>
<div><selectname="e">
<optionvalue="5"selected="selected">5</option>
<optionvalue="6">6</option>
<optionvalue="7">7</option>
</select></div>
<div>
<inputtype="checkbox"name="f"value="8"id="f"/>
</div>
<div>
<inputtype="submit"name="g"value="Submit"id="g"/>
</div>
</form>
.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 <input>, <textarea> 以及 <select>。不过，选择 <form> 标签本身进行序列化一般更容易些：
$('form').submit(function(){
alert($(this).serialize());
returnfalse;
});

输出标准的查询字符串：
a=1&b=2&c=3&d=4&e=5
注释：只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单，则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中，元素必须使用 name 属性。

赞 (0)

相关推荐

  • jquery序列化form表单使用ajax提交后处理返回的json数据

    1.返回json字符串: 复制代码 代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;charset=UTF-8");             pw = servletResponse.getWrit

  • Jquery 组合form元素为json格式,asp.net反序列化

    作者:敖士伟 Email:ikmb@163.com 转载注明作者 说明: 1.js根据表单元素class属性,把表单元素的name和value组合为json格式;用表单元素class属性可以针对性地组合JSON数据. 2.后端ASP.NET用JavaScriptSerializer反序列化为对象实列. 3.好处:简化了前端数据读取与后端数据赋值. 复制代码 代码如下: function GetJSONStr(class_name) { var a = []; //文本框 $("." +

  • 关于jquery form表单序列化的注意事项详解

    关于jquery form表单序列化的注意事项详解

    本文主要给大家介绍的是关于jquery form表单序列化的一些注意事项,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍: 我们先来讲讲表单中 中readonly和disabled的区别: readonly只对input和textarea有效, 但是disabled对于所以的表单元素都是有效的,包括radio,checkbox等 如果表单中使用的disabled那么用户是不能选择的,也就是说这个文本框是无法获取到焦点的,而readonly是可以获取到焦点,只是不能修改,为只读 最重要

  • jQuery form插件的使用之处理server返回的JSON， XML，HTML数据

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jQuery form插件的使用--处理server返回的JSON, XML,HTML数据</title> <meta http-equiv="Content-Type" cont

  • jQuery实现form表单元素序列化为json对象的方法

    jQuery实现form表单元素序列化为json对象的方法

    本文实例讲述了jQuery实现form表单元素序列化为json对象的方法.分享给大家供大家参考,具体如下: 这段代码序列化form表单元素为json对象: <!Doctype html> <html xmlns=http://www.w3.org/1999/xhtml> <head> <title>jQuery扩展--form序列化到json对象</title> <meta http-equiv=Content-Type content=&

  • 基于jQuery的一个扩展form序列化到json对象

    复制代码 代码如下: $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [ o[this.name] ]; } o[this.name].push(this.value || ''); } else { o[this.nam

  • jquery自动将form表单封装成json的具体实现

    前端页面: 复制代码 代码如下: <span style="font-size:14px;"> <form action="" method="post" id="tf"> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr

  • jquery form表单序列化为对象的示例代码

    复制代码 代码如下: $.fn.serializeObject = function() { var o = {}; var a = this.serializeArray(); $.each(a, function() { if (o[this.name]) { if (!o[this.name].push) { o[this.name] = [ o[this.name] ]; } o[this.name].push(this.value || ''); } else { o[this.nam

  • jQuery实现的form转json经典示例

    jQuery实现的form转json经典示例

    本文实例讲述了jQuery实现的form转json功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l

  • jQuery-serialize()输出序列化form表单值的方法

    实例 输出序列化表单值的结果: 复制代码 代码如下: $("button").click(function(){ $("div").text($("form").serialize()); }); 定义和用法 serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身. 序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中. 语

  • ASP.NET在MVC控制器中获取Form表单值的方法

    本文实例讲述了ASP.NET在MVC控制器中获取Form表单值的方法.分享给大家供大家参考,具体如下: 在MVC控制器中,如果我们想直接获取表单中某个标签元素的值,可以使用MVC中提供的FormCollection类,具体用法如下所示: 视图部分: @using (Html.BeginForm()) { <text>您输入的值是:</text><span>@ViewBag.FormValue</span> <input type="text&

  • jquery实现ajax提交form表单的方法总结

    方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";                   alert($('#formAddHandlingFee').serialize());                $.ajax({                    type: "P

  • jQuery序列化form表单数据为JSON对象的实现方法

    jquery提供的serialize方法能够实现. $("#searchForm").serialize(); 但是,观察输出的信息,发现serialize()方法做的是将表单中的数据以htpp请求格式拼接成字符串. serialize确实是能够解决一般的提交数据.但是有时我们需要的是一个object对象,而不是字符串(比如jqgrid reload时设置查询条件参数,就需要object对象). 方法如下: (function(window, $) { $.fn.serializeJs

  • jquery的ajax提交form表单的两种方法小结(推荐)

    jquery的ajax提交form表单的两种方法小结(推荐) 方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx"; alert($('#formAddHandlingFee').serialize()); $.ajax({ type: "POST", dataType: "html", url:

  • 浅谈jquery采用attr修改form表单enctype不起作用的问题

    做文件上传,需要将表单元素的enctype设置为'multipart/form-data',用jquery的attr方法在目前较新的主流浏览器上测试均可成功,唯独IE下死活不行.后来查阅ie浏览器6,7,8(9+由于开发机为xp,未进行测试)不支持attr的方式来修改enctype属性,需要通过dom元素的原生方法来设置, 代码如下: $('#form1').get(0).encoding = 'multipart/form-data'; 以上这篇浅谈jquery采用attr修改form表单en

  • php实现跨域提交form表单的方法【2种方法】

    本文实例讲述了php实现跨域提交form表单的方法.分享给大家供大家参考,具体如下: 有时我们为了网站安全考虑,我们不允许直接跨域提交form表单数据,如果我们自己有这个需求呢?下面我们来介绍两种跨域的方法解决直接跨域问题. 下面我们来看看两种php跨域提交form的方法 一.通过php curl function curlPost($url,$params) { $postData = ''; foreach($params as $k => $v) { $postData .= $k . '

  • jquery实现动态创建form并提交的方法示例

    本文实例讲述了jquery实现动态创建form并提交的方法.分享给大家供大家参考,具体如下: 有时候在写web 应用的时候,需要临时动态构造一个form 并提交,form 里面的参数以及action,以及是post请求还是get请求,甚至form 的样式都是可以指定的,用原生的javascript  肯定可以做到,我用jquery做了一个测试. 我自己测试的是构造一个分页的post请求, 为了防止csrf 攻击,加入了csrf 验证,不需要的可以去掉. function genSearchObj

  • SpringSecurity自定义Form表单使用方法讲解

    目录 背景 实验-HttpBasic 实验-自定义登录页面 实验-自定义登录接口 实验-自定义登录数据参数 实验-自定义登录失败.成功处理器 实验-自定义登录成功跳转页面 实验-自定义退出接口 背景 本系列教程,是作为团队内部的培训资料准备的.主要以实验的方式来体验SpringSecurity的各项Feature. 新建一个SpringBoot项目,起名springboot-security-form,核心依赖为Web,SpringSecurity与Thymeleaf. <dependencie

随机推荐