jquery表单序列化
$(function(){
$('#send').click(function(){
$.ajax({
type: "GET",
url: "test.json",
data: {username:$("#username").val(), password:$("#password").val()}, // 参数为对象
dataType: "json",
success: function(data){
// code...
}
});
});
});
$(function(){
$('#send').click(function(){
var username = $("#username").val();
var password = $("#password").val();
$.ajax({
type: "GET",
url: "test.json",
data: "username"+username+"&password"+password, // 参数为字符串拼接，并用&连接
dataType: "json",
success: function(data){
// code...
}
});
});
});
以上是一段常规的ajax请求代码，其中分别列举了data参数的两种传递格式。
为了简便ajax请求时的data参数获取，jquery定义了几个快速的方法。
1.serialize()
用法：var data = $("form").serialize();
返回值：将表单内容序列化成一个字符串。
这样在ajax提交表单数据时，就不用一一列举出每一个参数。只需将data参数设置为 $("form").serialize() 即可。
其核心方法是$.param()，用来对一个数组或对象按照key/value进行序列化，
var obj = {first:"one",last:"two"};
var str = $.param(obj);
console.log(str); // first=one&last=two
另外，使用serialize有个好处是自带中文编译处理。所以，推荐使用serialize。
2.serializeArray()
用法：var jsonData = $("form").serializeArray();
返回值：将页面表单序列化成一个JSON结构（键值对）的对象。
比如，[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[index].name
综上：在使用ajax提交表单数据时,data参数设置为$(form).serialize()或$(form).serializeArray()都可以。另外有些细节建议参考w3c。
最后补充一个完整实例。
html：
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form id="demo">
<input type="text" value="demo1" name="demo1">
<input type="text" value="demo2" name="demo2">
<input type="text" value="demo3" name="demo3">
<input type="submit" value="提交" id="submit">
</form>
</body>
</html>
JavaScript：
<script>
// 别忘了引入jquery !!!
$(function(){
$("#submit").click(function(){
// var data = $("form").serializeArray();
var data = $("form").serialize();
$.ajax({
type:"GET",
url:"1.php",
data:data,
dataType:"json",
success:function(data){
console.log(data);
},
error:function(xhr,error){
console.log(error);
}
})
})
})
</script>
php 提醒：需要配置php环境并开启服务器
<?php
echo json_encode($_GET);
?>
jquery表单序列化的更多相关文章
- Jquery表单序列化和AJAX全局事件
Jquery表单序列化 1.必须放在form标签内: 2.控件必须有name属性: 3.控件的value值会提交到服务器: 如: <form id="form1"> & ...
- Jquery表单序列化和json操作
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery 表单序列化
1.序列化为URL 编码文本字符串 var serialize = $("form[name=testForm]").serialize(); console.log(serial ...
- 将任意一个jQuery对象进行表单序列化，免除了提交请求时大量拼写表单数据的烦恼，支持键值对<name&value>格式和JSON格式。
http://zhengxinlong.iteye.com/blog/848712 将任意一个jQuery对象进行表单序列化,免除了提交请求时大量拼写表单数据的烦恼,支持键值对<name& ...
- （转）jquery serialize表单序列化，当radio或checkbox 未选中时，没有序列化到对象中的原因分析和解决方案 - ghostsf
相信很多人都用过jq的表单序列化serialize()方法,因为这能很方便地帮你把表单里所有的非禁用输入控件序列化为 key/value 对象,不需要你再去一个个地拼接参数了. 这是一个很好用的函数, ...
- jQuery实现form表单序列化转换为json对象功能示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- jquery ajax（5）form表单序列化
form表单序列化<script type="text/javascript"> $(function(){ $("#send").click(fu ...
- 浏览器下载/导出文件 及jQuery表单提交
1 比如以下按钮, 用于导出文件,如EXCEL文件. <li> <button class="whiteBg btn2" onclick="doExp( ...
- $.ajax、$.post、from表单序列化工具
$.ajax\$.post <script type="text/javascript" language="javascript" src=" ...
随机推荐
- Json对象和Json字符串之间的转换
json字符串转json对象,调用parse方法: var b='{"name":"2323","sex":"afasdf&quo ...
- ABP入门系列（16）——通过webapi与系统进行交互
ABP入门系列目录--学习Abp框架之实操演练 源码路径:Github-LearningMpaAbp 1. 引言 上一节我们讲解了如何创建微信公众号模块,这一节我们就继续跟进,来讲一讲公众号模块如何与 ...
- 【NIO】Java NIO之选择器
一.前言 前面已经学习了缓冲和通道,接着学习选择器. 二.选择器 2.1 选择器基础 选择器管理一个被注册的通道集合的信息和它们的就绪状态,通道和选择器一起被注册,并且选择器可更新通道的就绪状态,也可 ...
- jdk源码剖析五：JDK8-废弃永久代（PermGen）迎来元空间（Metaspace）
目录 1.背景 2.为什么废弃永久代(PermGen) 3.深入理解元空间(Metaspace) 4.总结 ========正文分割线===== 一.背景 1.1 永久代(PermGen)在哪里? 根 ...
- Angular2.js——多个组件
目前我们的英雄列表和英雄详情位于同一个文件的同一个组件中,我们将来可能会受到新的需求,修改这个组件又不能影响另外一个.然而每一次更改都会给这两个组件带来风险和双倍的测试负担,没有任何好处.如果我们需要 ...
- C语言精要总结-指针系列（一）
考虑到指针内容繁多,这里将指针作为一个系列,从简入繁,一点一点深挖并掌握这C语言的精华.初步计划如下 此文为指针系列第一篇: C语言精要总结-指针系列(一) 内存与地址 我们可以把内存看做一排连续的房 ...
- vue渲染数据后与owlCarousel轮播插件冲突，失效
主要原因:dom解析准备完成后,开始执行$(document).ready(); 而vue是在window.onload(页面加载完后才执行):所以会导致owlCarousel插件失效. 解决方案:数 ...
- HTML5工具做屏幕自适应的两种方法
近一两年,HTML5在中国很火,也出了不少HTML5工具和模板.别的先不说,对于不同的H5工具,解决屏幕自适应问题的区别是什么? 简单来说,感应式设计是当用不同设备访问时,能够根据设备的宽度和高度对设 ...
- JS常用方法【私房菜-笔记】-持续整理中
//记录一下前端开发中 JS常用的方法等,持续收集整理中 ---------------------------------------------------------- //处理键盘事件 禁止后 ...
- （原创）性能测试中，Oracle服务器定位CPU使用率高的瓶颈（SQL）
本篇博客记录一次性能测试过程中,定位对CPU使用率高的瓶颈问题,主要定位SQL为准 一.用SQL命令定位1.首先用TOP命令监控系统资源,如果是AIX系统,就用topas,进入TOP命令的滚动刷新数据 ...