jQuery ajax - serialize()方法以及常见问题

标签: jquery ajax serialize | 发表时间:2013-01-24 11:26 | 作者:JiaLiSOFTWARE
出处:http://blog.csdn.net
使用ajax时,常常需要拼装input数据为'name=abc&sex=1'这种形式,用 JQuery的serialize方法可以轻松的完成这个工作!
jQuery ajax - serialize() 方法定义和用法
serialize() 方法通过序列化表单值,创建 URL 编码文本字符串。
您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身。
序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。
jQuery ajax - serialize() 方法语法
$(selector).serialize()
jQuery ajax - serialize() 方法详细说明
.serialize() 方法创建以标准 URL 编码表示的文本字符串。它的操作对象是代表表单元素集合的 jQuery 对象。
jquery ajax - serialize() 方法表单元素有几种类型:

<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
jQuery ajax - serialize() 方法注意:只会将”成功的控件“序列化为字符串。如果不使用按钮来提交表单,则不对提交按钮的值序列化。如果要表单元素的值包含到序列字符串中,元素必须使用 name 属性。
以上jQuery ajax - serialize() 方法基础内容转W3C,下面讲解下用jQuery ajax - serialize() 方法时候出现的几种常见问题 下面分享给大家
请看下面例子如:

<form id="form1">
<input name="name1" type="text" value="pipi" />
<input name="name2" type="radio" value="1" checked/>boy
<input name="name2" type="radio" value="0"/>girl 
<textarea name="name3">test</textarea>
</form>

使用:$("#form1").serialize();
结果:name1=pipi&name2=1&name3=test
用jQuery ajax - serialize()方法还有个问题
如果是下面的情况:

<form id="form1">
    <input name="name" type="text" value="pipi" />
    <input name="blog" type="text" value="blue submarine" />
</form>

使用:$("#form1").serialize();
结果:name1=pipi&blog=blue+submarine
就是如何能让+号变回空格呢?
最后还有一个问题,如下所示:

<form id="form1">
   <input name="length" type="text" value="pipi" />
   <input name="blog" type="text" value="blue submarine" />
</form>

使用:$("#form1").serialize();
结果:blog=blue+submarine 没法出现length=pipi
原因是length是js数组的属性关键字,出现冲突了,将name改为其他非冲突字符串即可
作者:JiaLiSOFTWARE 发表于2013-1-24 11:26:01 原文链接
阅读:0 评论:0 查看评论

相关 [jquery ajax serialize] 推荐:

jQuery ajax - serialize()方法以及常见问题

- - CSDN博客推荐文章
使用ajax时,常常需要拼装input数据为'name=abc&sex=1'这种形式,用 JQuery的serialize方法可以轻松的完成这个工作. jQuery ajax - serialize() 方法定义和用法. serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 form 元素本身.

jquery ajax 跨域请求

- - 博客园_首页
使用 jquery 中的ajax  进行跨域请求. 说明:dataType 为  "jsonp"  ;type 只能为 GET.                    //处理错误. 后台处理代码 ValidAccountsExists.aspx.

jquery的$.ajax() $.post() $.getJSON() 等ajax方法时,中文参数乱码问题

- - CSDN博客推荐文章
在使用jquery的$.ajax()  $.post() $.getJSON() 等ajax方法时,难免会有用到中文参数的问题,在后台接收的中文参数是乱码,解决方法如下:.     dataType : ‘json’     ,type : ‘POST’     ,url : ‘http://localhost/test/test.do’     ,data : {id: 1, type: ‘商品’}     ,success : function(data){             } } );.

10款实用的Ajax相关的jQuery插件推荐

- jingjing - ITeye资讯频道
本文搜集了10款最近受欢迎的、实用的AJAX jQuery插件,包括终端命令行、分页、图表、购物车插件等,你可以在你的网站或应用中使用这些插件,以达到意想不到的效果. 该插件可以在网站上实现终端交互效果. 这可不是FTP或SSH终端,你可以定义交互的命令. 该插件可以使用多种方式来解决页面分页问题,它采用一个简单而直截的Callback设计.

jQuery中利用JSONP解决AJAX跨域问题

- - 蓝飞技术博客
跨域的解决方案有多种,其中最常见的是使用同一服务器下的代理来获取远端数据,再通过ajax进行读取,而在这期间经过了两次请求过程,使得获取数据的效率大大降低,这篇文章蓝飞就为大家介绍一下解决跨域问题的一种比较通用的方案——JSONP. 简单的来说,出于安全方面的考虑,页面中的JavaScript无法访问其他服务器上的数据,即“同源策略”.

利用jQuery和HTML5实现无刷新Ajax风格的表单

- - CSDN博客推荐文章
        利用jQuery我们能够做出一些相当震撼的网页效果. jQuery的出现使DOM的操作更加的简单易用. 下面的教程展示了如何利用jQuery创建一个HTML5效果的邀请表格,同时实现表格内容的检查功能.         首页的格式必须是HTML5的格式.         接下来添加jQuery库,将如下代码添加到标签之前:.

菜鸟简述Jquery中Ajax发送post请求及XML响应

- - 博客园_首页
在没有出现jquery前,是通过纯手工的方式获取XmlHttpRequest对象来向服务器发送异步请求实现局部刷新. 在jquery出现以后我们利用其封装好的对象来实现ajax请求,下面以post请求为例作一个简单介绍:. jQuery.post(url, [data], [callback], [type]),其中url为请求地址,data为待发送的参数及其值,callback为发送成功时的回调函数,type为返回内容的类型(xml、html、text、json等).

使用jQuery ajax中按钮button和submit的区别

- - 博客园_首页
昨天在使用jQuery ajax的post方法进行页面传值,无刷新获取数据展示,弄了半天就是没有效果,看了半天也没有语法错误,最后才终于明白问题出在哪里.. jQuery ajax的post方法这样写应该是没有问题的,点击submit提交按钮,sendPwd.php通过$_POST接收传过来的值,然后echo一段数据.

精心挑选的12款优秀 jQuery Ajax 分页插件和教程

- - 博客园_梦想天空
  在这篇文章中,我为大家收集了12个基于 . jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示. Web 项目的用户体验有了极大的提高,如今借助优秀的. jQuery 框架很容易实现各种基于 Ajax 技术实现的功能. 我们一起来看看下面这些优秀的分页插件. jPages 是一款非常不错的客户端分页插件,有很多特色,例如自动播放、按键翻页、延迟加载等等.

原生AJAX

- - Web前端 - ITeye博客
对象是ajax的基础,几乎所有的浏览器都支持他,只是创建方式不同,如IE5,IE6. 2、AJAX - 向服务器发送请求请求. 与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用. 然而,在以下情况中,请使用 POST 请求:. 无法使用缓存文件(更新服务器上的文件或数据库). 向服务器发送大量数据(POST 没有数据量限制).