开发者社区> webmirror> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jquery序列化表单 - serialize()/serializeArray()/param()区别

简介: 在jQuery中,当我们使用ajax时,常常需要拼装input数据以键值对(Key/Value)的形式发送到服务器,用JQuery的serialize方法可以轻松的完成这个工作,使用这个方法可以将表单序列化为键值对(key1=value1&key2=value2…)后提交。
+关注继续查看

serialize()

在jQuery中,当我们使用ajax时,常常需要拼装input数据以键值对(Key/Value)的形式发送到服务器,用JQuery的serialize方法可以轻松的完成这个工作,使用这个方法可以将表单序列化为键值对(key1=value1&key2=value2…)后提交。下面介绍JQuery中serialize()的用法

定义

serialize()方法通过序列化表单值,创建URL编码文本字符串,可以选择一个或多个表单元素(比如 input 及/或 文本框),或直接选择form本身,将其序列化后用于ajax请求,如:username=xxx&password=yyy

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

格式

var data = $('form').serialize();

功能

将表单内容序列化成一个字符串

返回结果

username=forrest&passwd=1234&gender=0&interest=swimming&interest=running&interest=readBook

优点

1.在ajax提交表单数据时,就不用一一列举出每一个参数。只需将data参数设置为$("form").serialize()

2.用字符串方式时,需要注意对字符编码(中文问题),如果不希望编码带来麻烦,可以使用serialize()方法,它会自动编码

实例

<form action="">
First name: <input type="text" name="FirstName" value="Bill" /><br />
Last name: <input type="text" name="LastName" value="Gates" /><br />
</form>
<script>
$(document).ready(function(){
    console.log($("form").serialize()); // FirstName=Bill&LastName=Gates
});
</script>

这样,我们就可以把序列化的值传给ajax()作为url的参数,轻松使用ajax()提交form表单了,而不需要一个一个获取表单中的值然后传给ajax()

$.ajax({
    type: 'post',
    url: 'your url',
    data: $("form").serialize(),
    success: function(data) {
        // your code
    },
    error: function(error){alert(error);
});

使用$.post()、$.get()和$.getJSON()也是一样的

$.post('your url', $("form").serialize(), function(data) {
        // your code
    }
});

$.get('your url', $("form").serialize(), function(data) {
        // your code
    }
});

$.getJSON('your url', $("form").serialize(), function(data) {
        // your code
    }
});

serializeArray()方法

JQuery中serializeArray方法是序列化表单元素(类似'.serialize()'方法)返回JSON数据结构数据

serializeArray()序列化表单元素为JSON数据

格式

var jsonData = $("form").serializeArray();

功能

将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串

返回结果:

[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name

实例

var fields = $("select, :radio").serializeArray();
jQuery.each( fields, function(i, field){
  $("#results").append(field.name + "=" +field.value + "; ");
});//username=forrest; passwd=1234; gender=0; interest=swimming; interest=running; interest=readBook;

在使用ajax提交表单数据时,以上两种方法都可以将data参数设置为$(form).serialize()或$(form).serializeArray()

<!doctype html>  
<html>  
<head>  
<meta charset="utf-8">  
<title>无标题文档</title>  
<script src="js/jquery-3.1.1.min.js"></script>  
<script>  
    function t(){  
     var str1 =  $("form").serialize();  
     var str2 =  $("form").serializeArray();  
     alert("serialize="+str1+"   serializeArray="+str2);  
    }  
</script>  
</head>  
<body>  
  <form>  
     <input type="text" name="username" />  
     <input type="text" name="age" >  
     <input type="password" name="password" />  
     <input type="button" onclick="t();">  
  </form>  
</body>  
</html> 

param()方法

$.param()方法是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化

比如将一个普通的对象序列化:

var obj = {a:1,b:2,c:3};

var k = $.param(obj);

alert(k); //输出a=1&b=2&c=3

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
NET MVC第七章、jQuery插件验证
NET MVC第七章、jQuery插件验证
14 0
编写自定义的JQuery插件的几个注意点
编写自定义的JQuery插件的几个注意点
9 0
关于JQuery validate表单校验插件对级联下拉框的校验问题
关于JQuery validate表单校验插件对级联下拉框的校验问题
26 0
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
jQuery的DOM文档对象模型,常见的事件,遍历,validate插件,自定义事件方法
20 0
jQuery全屏滚动插件fullPage.js
简介 如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面(查看),QQ浏览器的官网站。
1410 0
jquery Dialog弹框插件
function Dialog(options) { var defaults = { // 默认值。 title: '', // 标题文本,若不想显示title请通过CSS设置其display为none type: 'text', // id,img,iframe,url,text content: '', // 要显示的内容 showTitle: true, // 是否显示标题栏。
935 0
20款美化网站的 jQuery Lightbox 灯箱插件
  jQuery Lightbox 灯箱插件可以让你为您的网站和应用程序展示优雅的图像,视频 和其它内容(使用模式窗口)。如果你是一个开发人员,你必须拥有 jQuery 灯箱插件集合,因为有一部分的客户会要求他们的网站看起来更有吸引力和视觉冲击力。
1532 0
FancyBox - 经典的 jQuery Lightbox 插件
  FancyBox 是一款非常优秀的弹窗插件,能够为图片、HTML 内容和其它任务的多媒体内容提供优雅的弹出缩放效果。作为是最流行的 Lightbox 插件之一,可以通过 fitToView 实现自适应功能。
843 0
+关注
webmirror
Good good study, day day up
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载