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. AtCoder - 2705 Yes or No

    Problem Statement You are participating in a quiz with N+M questions and Yes/No answers. It's known ...

  2. 5.2类集(java学习笔记)Map,Set接口

    一.Map接口 Map接口中存储数据是通过key->value的方式成对存储的,可以通过key找到value. 二.Map接口常用子类 1.HashMap HashMap是无序存放的,key不允 ...

  3. UWP 程序抛出异常时总是跳到“global::System.Diagnostics.Debugger.Break();”的解决办法

    调试 C# 程序时,如果遇到异常,VS 会中断,指出导致异常的语句.但是最近调试 UWP 程序时,发现总是在“global::System.Diagnostics.Debugger.Break();” ...

  4. React Native之ES5/ES6语法差异对照表

    很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教 ...

  5. [置顶] Windows显示驱动(WDDM)编程初步(2)

    欢迎转载[作者:张佩][原文:http://www.yiiyee.cn/Blog/wddm2/] 第二部分专门只讲VIDPN.这是后面内容的基础.WDDM框架用VIDPN这个概念,来描述它所要处理的显 ...

  6. NET PROVIDER 连接 Oracle数据库

    NET 数据库连接 ORacle      http://www.devart.com/ DataDirect   http://www.datadirect.com/ Oracle免客户端For . ...

  7. javascript常见的数组方法

    1:Array对象用于在单个变量中存储多个值typeof(arrArr) 'object'var arr1 = [];//创建一个空数组eg:数组是个引用类型var a = [1,2,3];var b ...

  8. Cobbler安装CentOS 7网卡命名修改

    准备上线CentOS 7.x,在Cobbler上导入后,发现网卡名称变成了eno1这样的,好吧,那就添加两个内核参数上去,让它变回eth0. cobbler profile edit --name=C ...

  9. 两个IP实现IIS和Apache公用80端口的设置方法

      1. 打开命令提示符并确保您位于 X:\Inetpub\Adminscripts 文件夹(其中 X 是 IIS 安装驱动器)中.为此,请在命令提示符下键入以下命令行: X: CD \Inetpub ...

  10. Spring boot 数据源未配置异常

    问题 在使Springboot自动生成的项目框架时如果选择了数据源,比如选择了mysql,生成项目之后,启动会报一下异常: Description: Cannot determine embedded ...