jQuery 之 serialize() serializeArray()

  jQeury提供了2个帮助获取表单元素数据的方法。分别是serialize()  和 serializeArray()。两者作用完全相同,只不过是返回值不同,前者是返回一个字符串,后者返回一个Json对象数组。直接看例子,一目了然。

  1.表单结构代码

<form id="form1">
    <input type="text" name="uName"  value="老王">
    <input type="password" name="pwd"  value="123456">
    <input type="text" name="phone" value="13555558888">
    <input type="submit" id="btn" value="提交数据">
</form>

  2.js代码

 //引入必要的jquery依赖js 上面已经说过jquery中包含完整的ajax
<script src="/static/jquery1.12.min.js"></script>
<script>
    $(document).ready(function () {
        //点击提交按钮 打印两种序列化方式出来的字符串
        $("#btn").click(function () {
            //打印字符串序列化表单
            console.log($("#form1").serialize());
            //打印json数据格式序列化表单
            console.log($("#form1").serializeArray())
        })
</script>

  3.输出结果

  jQuery会自动搜索到form1中的所有表单元素,然后获取到对应的value值。这里需要注意的是,所有的表单元素在获取时,是以name属性为准的,不是以id属性为准。

  serialize()的输出结果是:uName=老王&pwd=123456&phone=13555558888。

  serializeArray()的输出结果是:[{"uName" :  "老王"}, {"pwd" : "123"}, {"phone" : "13555558888"}]

  

原文地址:https://www.cnblogs.com/ldq678/p/9736157.html

时间: 2024-10-12 04:44:49

jQuery 之 serialize() serializeArray()的相关文章

jQuery使用serialize(),serializeArray()方法取得表单数据+字符串和对象类型两种表单提交的方法

原始form表单值获取方式(手动): $.ajax({ type: "POST", url: "ajax.php", data: "Name=摘取天上星&position=IT技术", success: function(msg){alert(msg);}, error: function(error){alert(error);} }); JQ serialize()方法取值: $.ajax({ type: "POST&quo

JQuery中serialize()、serializeArray()和param()用法举例

在javascript中,serialize()方法也是作用于一个JQuery对象,它能够将DOM元素内容序列化为字符串,serializeArray()方法不是返回字符串,而是将DOM元素序列化后,返回JSON格式的数据. 服务器端的jsp代码: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% request.setCharacte

JQuery中serialize()

一.serialize()定义和用法: serialize()方法通过序列化表单值,创建标准的URL编码文本字符串,它的操作对象是代表表单元素集合的jQuery 对象.你可以选择一个或多个表单元素(比如input或文本框),或者 form 元素本身.序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中. 语法: $(selector).serialize() 详细说明 1..serialize() 方法创建以标准 URL 编码表示的文本字符串.它的操作对象是代表表单元素集合的 jQue

jQuery的serialize()序列化简单介绍

jQuery的serialize()序列化简单介绍: 在jQuery中,当使用ajax时,常常需要拼装input数据以键值对(Key/Value)的形式发送到服务器. serialize方法可以轻松的完成这个工作,使用这个方法可以将表单序列化为键值对(key1=value1&key2=value2)后提交. 下面介绍JQuery中serialize()的用法: 一.serialize()定义和用法: serialize()方法通过序列化表单值,创建标准的URL编码文本字符串,它的操作对象是代表表

JQuery中serialize() 序列化

更多2014/8/24 来源:jquery学习浏览量:1671 学习标签: serialize 本文导读:在jQuery中,当我们使用ajax时,常常需要拼装input数据以键值对(Key/Value)的形式发送到服务器,用JQuery的serialize方法可以轻松的完成这个工作,使用这个方法可以将表单序列化为键值对(key1=value1&key2=value2…)后提交.下面介绍JQuery中serialize()的用法 一.serialize()定义和用法: serialize()方法通

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

jQuery ajax serialize()方法form提交数据,有个很奇怪的问题,好像不能取到隐藏控件的值. //点击提交按钮保存数据 $('#btn_submitUser').click(function () { var UserId = $('#UserId').val(); if (UserId == "") { $.ajax({ type: "POST", url: '/Users/Create/', data: $("#SaveUserFo

jQuery ajax - serialize() 方法

jQuery ajax - serialize() 方法 jQuery Ajax 参考手册 实例 输出序列化表单值的结果: $("button").click(function(){   $("div").text($("form").serialize()); }); 亲自试一试 定义和用法 serialize() 方法通过序列化表单值,创建 URL 编码文本字符串. 您可以选择一个或多个表单元素(比如 input 及/或 文本框),或者 fo

关于Jquery的serialize()使用注意

我使用Jquery的serialize方法的目的是想方便的收集form下的表单域,但是不小心的话,收集回的信息不是你想要的. 举个例子:我们需要根据名字查询列表,名字是可以输入中文的,然后你用 alert($("#queryForm").serialize()) 查看你的查询值,发现被转码了,因为serialize()自动调用了encodeURIComponent方法将数据编码了,如果你的代码环境适合jquery这种默认帮你转码的情况呢,恭喜你,这个工具很合适你,但是像我这种不需要他转

关于jquery的serialize方法转换空格为+号的解决方法

jquery的 serialize()方法,可以对表单项进行序列化,这本来是很方便的一个功能:但是实际使用中去发现了如下问题:例如:< textarea name="content">abc 123 <  /  textarea >那么在执行 serialize()方法后,得到的却是  abc+123  这样的字符串:即jquery的序列化方法对空格进行了转义,转换成了 + 号.jquery中serialize方法的部分代码如下所示://............