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. 【AC自动机/fail树】BZOJ3172- [Tjoi2013]单词

    [题目大意] http://www.lydsy.com:808/JudgeOnline/problem.php?id=3172 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多 ...

  2. [HNOI/AHOI2018]寻宝游戏

    题目大意: $n(n\le1000)$个$m(m\le5000)$位的二进制数,第$0$个数为$0$.用$\wedge$和$\vee$将这些数连接起来.$q(q\le1000)$次询问,每次给定一个$ ...

  3. 动态规划之DP中判断是否到达某一状态(最短时间是什么)?

    codevs1684 垃圾陷阱  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold   题目描述 Description 卡门——农夫约翰极其珍视的一条Holste ...

  4. GAILS里面的SAVE方法

    用途 保存一个domain类的实例到数据库,需要的话会级联保存所有的子实例. 举例 def b = new Book(title:"The Shining") b.save() 描 ...

  5. spark 持久化机制

    spark的持久化机制做的相对隐晦一些,没有一个显示的调用入口. 首先通过rdd.persist(newLevel: StorageLevel)对此rdd的StorageLevel进行赋值,同chec ...

  6. 开源用户界面和布局的套件XiaoCai.WinformUI(美化用户界面利器)

    发布一款开源用户界面和布局的套件,请朋友们多提提宝贵建议! XiaoCai.WinformUI主要是解决用户界面和布局的套件,能够快速进行合理性布局,美化用户界面. 因为之前发布到谷歌里,好多朋友都说 ...

  7. md5代码实现

    参考: 1.http://blog.csdn.net/iaccepted/article/details/8722444 2.http://hi.baidu.com/gh0st_lover/item/ ...

  8. Ubuntu -- 安装和部署php5.6 nginx php5.6-fpm

      1.首先输入用户名和密码进行登录 2.升级更新软件包 sudo apt-get update sudo apt-get upgrade 判断都填y 3.安装nginx sudo apt-get i ...

  9. [干货]2017已来,最全面试总结——这些Android面试题你一定需要

        地址.http://blog.csdn.net/xhmj12/article/details/54730883 相关阅读: 吊炸天!74款APP完整源码! [干货精品,值得收藏]超全的一线互联 ...

  10. 利用saltstack的event实现自己的功能

    saltstack的master上minion连接较多,下面这个程序可以分析哪些minion任务执行成功,哪些执行失败以及哪些没有返回. 脚本说明: 一.最先打印出本次任务的job id.comman ...