jQuery ajax - serialize() 方法

实例

输出序列化表单值的结果:

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

亲自试一试

定义和用法

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

您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

语法

$(selector).serialize()

详细说明

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

表单元素有几种类型:

<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="8" cols="40">4</textarea>
</div>
<div><select name="e">
<option value="5" selected="selected">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select></div>
<div>
<input type="checkbox" name="f" value="8" id="f" />
</div>
<div>
<input type="submit" name="g" value="Submit" id="g" />
</div>
</form>

.serialize() 方法可以操作已选取个别表单元素的 jQuery 对象,比如 <input>, <textarea> 以及 <select>。不过,选择 <form> 标签本身进行序列化一般更容易些:

$('form').submit(function() {
alert($(this).serialize());
return false;
});

输出标准的查询字符串:

a=1&b=2&c=3&d=4&e=5

注释:只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。

jquery的ajax-serialize()的更多相关文章

  1. 2016 系统设计第一期 (档案一)jQuery ajax serialize()方法form提交数据

    jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(fun ...

  2. 详解Ajax请求(三)——jQuery对Ajax的实现及serialize()函数对于表单域控件参数提交的使用技巧

    原生的Ajax对于异步请求的实现并不好用,特别是不同的浏览器对于Ajax的实现并不完全相同,这就意味着你使用原生的Ajax做异步请求要兼顾浏览器的兼容性问题,对于java程序员来讲这是比较头疼的事情, ...

  3. jQuery与Ajax的应用——《锋利的jQuery》(第2版)读书笔记3

    第6章 jQuery与Ajax的应用 jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第2层是load().$.get()和$.post()方法,第3层是$ ...

  4. 第六章 jQuery和ajax应用

    ajax是异步JavaScript和xml的简称. 一. ajax补白 优势 不足(不一定是不足) 不需要任何插件(但需要浏览器支持js) XMLHttpRequest对象在不同浏览器下有差异 优秀的 ...

  5. jQuery的ajax 方法提交多个对象数组问题 C# traditional $.param

    当用$.ajax()向后台提交参数时,如果参数中数组的话一般在后台会用List<T>接收;但老是不成功如下面代码 "}]; "}]; function addUser( ...

  6. 【ERROR】使用jquery的ajax出现error:readyState=4,status=500

    使用jquery的ajax出现error:readyState=4,status=500,ajax代码如下: $.ajax({ url : "../toBeFinMisManage/show ...

  7. 触碰jQuery:AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  8. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  9. 详细解读Jquery各Ajax函数

    $.get(),$.post(),$.ajax(),$.getJSON() 一,$.get(url,[data],[callback]) 说明:url为请求地址,data为请求数据的列表,callba ...

  10. 第八章 jQuery与Ajax应用

    Ajax(Asynchronous JavaScript and XML),异步JavaScript和XML,它实现的无刷新更新页面,能够进行异步提交. jQuery对Ajax进行了封装,最底层的是$ ...

随机推荐

  1. [CF911G]Mass Change Queries

    题目大意: 给你一个长度为n的数列a,按顺序进行以下m次操作,每次将区间[l,r]中的所有x变成y,问最后数列是怎样的. 思路: 线段树. 每个线段树结点上维护当前区间每个数分别会变成多少.时间复杂度 ...

  2. Mybatis添加用户&&Mybatis添加用户返回ID

    (1)添加用户(添加User记录) <!--插入用户 --> <insert id="insertUser" parameterType="com.so ...

  3. 根文件系统及Busybox简介

    转:http://blog.csdn.net/wqc02/article/details/8930184 1.根文件系统简介...2 2.Busybox简介...2 2.1Busybox简介...2 ...

  4. 百度display name为中文导致奔溃,productName和budlename区分出来

    把"xxx-info.plist"中的"Bundle display name"的值改成了英文,或者把它的值修改成系统默认的"${PRODUCT_NA ...

  5. Android Studio Emulator 提示 “/dev/kvm is not found” 解决办法

    重新安装HAXM即可解决 1.确定已经安装HAXM SDK Manager -> Extras -> Intel x86 Emulator Accelerator (HAXM instal ...

  6. css的checkbox样式变化

    1.CSS body{font-family:'微软简行楷'} ul li{list-style:none; margin:10px;color:#4985d7;} .myCheck { displa ...

  7. fl2440hello world模块驱动编写

    许多语言,例如C,C++,JAVA等等都是从hello world开始的,因此我们的驱动程序的开发也要从hello world入手. 首先来看下我们的代码: /******************** ...

  8. wordcount代码实现详解

    阅读目录 1.MapReduce整体流程 2.WordCount源码 3.WordCount逐行解析 Hadoop的框架最核心的设计就是:HDFS和MapReduce.HDFS为海量的数据提供了存储, ...

  9. win7上搭建ruby开发环境

    1. 安装ruby 可使用windows下的ruby安装工具rubyinstaller来方便地安装ruby解释器,可以http://rubyinstaller.org/网站上下载得到.安装时,看清安装 ...

  10. Spark(七) -- Scala快速入门

    Scala作为Spark的开发语言,想要成为Spark高手,精通Scala是必须要走的一条路 然后一门语言并不是你想精通就能够精通的,更何况是Scala这种面向对象又面向函数的编程语言,个人觉得其学习 ...