jQuery中的serializer序列化—炒鸡好用
jQuery.serializer()序列化
serialize()函数用于序列化一组表单元素,将表单内容编码为用于提交的字符串。
serialize()函数常用于将表单内容序列化,以便用于AJAX提交。
该函数主要根据用于提交的有效表单控件的name和value,将它们拼接为一个可直接用于表单提交的文本字符串,该字符串已经过标准的URL编码处理(字符集编码为UTF-8)。
无效的表单控件不会被提交,包括:
不在<form>标签内的表单控件不会被提交
没有name属性的表单控件不会被提交
带有disabled属性的表单控件不会被提交
没有被选中的表单控件不会被提交
语法
jQueryObject.serialize()
serialize()函数的返回值为String类型,返回将表单元素编码后的可用于表单提交的文本字符串。
html初始代码
<form name="myForm" action="http://www.365mini.com" method="post">
<input name="uid" type="hidden" value="1" />
<input name="username" type="text" value="张三" />
<input name="password" type="text" value="123456" />
<select name="grade" id="grade">
<option value="1">一年级</option>
<option value="2">二年级</option>
<option value="3" selected="selected">三年级</option>
<option value="4">四年级</option>
<option value="5">五年级</option>
<option value="6">六年级</option>
</select>
<input name="sex" type="radio" checked="checked" value="1" />男
<input name="sex" type="radio" value="0" />女
<input name="hobby" type="checkbox" checked="checked" value="1" />游泳
<input name="hobby" type="checkbox" checked="checked" value="2" />跑步
<input name="hobby" type="checkbox" value="3" />羽毛球
<input name="btn" id="btn" type="button" value="点击" />
</form>
序列化form表单中的所有元素
alert( $("form").serialize());
// 序列化结果: uid=1&username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&sex=1&hobby=1&hobby=2
序列化部分表单元素
alert( $(":text, select, :checkbox").serialize());
// 序列化后的结果:username=%E5%BC%A0%E4%B8%89&password=123456&grade=3&hobby=1&hobby=2
使用实例
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width">
<title>Title</title>
</head>
<body>
<form name="myForm" action="http://www.365mini.com" method="post">
<input name="uid" type="hidden" value="1" />
<input name="username" type="text" value="张三" />
<input name="password" type="text" value="123456" />
<select name="grade" id="grade">
<option value="1">一年级</option>
<option value="2">二年级</option>
<option value="3" selected="selected">三年级</option>
<option value="4">四年级</option>
<option value="5">五年级</option>
<option value="6">六年级</option>
</select>
<input name="sex" type="radio" checked="checked" value="1" />男
<input name="sex" type="radio" value="0" />女
<input name="hobby" type="checkbox" checked="checked" value="1" />游泳
<input name="hobby" type="checkbox" checked="checked" value="2" />跑步
<input name="hobby" type="checkbox" value="3" />羽毛球
<input name="btn" id="btn" type="button" value="点击" />
</form>
<script src="/static/jquery-3.2.1.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script>
$("#btn").click(function () {
{# 方式一#}
//$.ajaxSetup({
// data:{csrfmiddlewaretoken:'{{ csrf_token }}'}
//});
$.ajax({
url:"/serialize/",
type:"POST",
{# 方式三#}
headers:{"X-CSRFToken":$.cookie('csrftoken')},
//data:$("form").serialize(), //序列form表单所有的
data:$(":text,:password,:checkbox").serialize(), //序列自己选择的
success:function (data) {
var data=JSON.parse(data); //js中的反序列化
console.log(data);
console.log(typeof data);
$(".error").html(data);
}
})
})
</script>
</body>
</html>
serialize.html
views.py
def serialize(request):
# form = request.POST
# print(form)
name = request.POST.get("username")
password = request.POST.get("password")
checked = request.POST.getlist("hobby")
print(name,password,checked)
return HttpResponse(json.dumps(name))
当有好多input的时候,就得一一对应的吧所有的数据发过去的,这样显得麻烦,我们用序列化。
// 前端
data:$("form").serialize(), //序列form表单所有的
data:$(":text,:password,:checkbox").serialize(), //序列自己选择的
在服务端获取数据
form = request.POST
print(form) #获取所有
name = request.POST.get("username")
password = request.POST.get("password")
checked = request.POST.getlist("hobby")
print(name,password,checked)#获取单个
jQuery中的serializer序列化—炒鸡好用的更多相关文章
- jquery中使用serialize() 序列化表单时 中文乱码问题
序列化中文时之所以乱码是因为.serialize()调用了encodeURLComponent方法将数据编码了 解决方法就是进行解码 1 原因:.serialize()自动调用了encodeURICo ...
- JQuery中serialize() 序列化
更多2014/8/24 来源:jquery学习浏览量:1671 学习标签: serialize 本文导读:在jQuery中,当我们使用ajax时,常常需要拼装input数据以键值对(Key/Value ...
- jQuery DataTables && Django serializer
jQuery DataTables https://www.datatables.net 本文参考的官方示例 http://datatables.net/release-datatables/exam ...
- 【jQuery基础学习】05 jQuery与Ajax以及序列化
好吧,这章不像上章那么水了,总是炒剩饭也不好. 关于AJAX 所谓Ajax,全名Asynchronous JavaScript and XML.(也就异步的JS和XML) 简单点来讲就是不刷新页面来发 ...
- JQuery中的工具函数总结
前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...
- JQuery中ajax的相关方法总结
前提条件 话说是jquery中的ajax方法,那么前提条件当然是引入jquery啦. <script src="http://libs.baidu.com/jquery/1.9.0/j ...
- jQuery中的100个技巧
1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. < ...
- Ajax_04之jQuery中封装的Ajax函数
1.PHP中json_encode编码规则: PHP索引数组编码为JSON:[...] PHP关联数组编码为JSON:{...}2.jQuery中AJAX封装函数之load: ①使用:$('选择器') ...
- Jquery中的Ajax
AJAX: * jQuery中的Ajax * 封装第一层 - 类似于原生Ajax的用法 * $.ajax() - 最复杂 * 选项 * url - 请求地址 * type - 请求类型,默认为GET ...
随机推荐
- Git-第四篇廖雪峰Git教程学习笔记(3)远程仓库,克隆远端库
1.本次连接的是gitHub仓库. 1>创建SSH Key. ssh-keygen -t rsa -C "youremail@example.com" lfy@lfy-PC ...
- java变量的类型
变量的类型 一 按数据类型分: 1.基本数据类型 : 整型 : byte (1字节 - (-128 ~ 127)) short (2字节) int (4字节) long (8字节) 浮点型 : ...
- 小白学Python(16)——pyecharts 绘制地理图表 Geo
Geo-基本示例 from example.commons import Faker from pyecharts import options as opts from pyecharts.char ...
- log.info()传入多个参数的方法
不知道项目里用的是啥 ** 版本的 log4j 居然不能传入变长参数 logger.info(String.format("%s %s %s", username, feature ...
- vue自定义指令获取焦点及过滤器修改时间
<template id="comp3"> <div id="app"> <model :list="selectedl ...
- 线程局部变量ThreadLocal实现原理
ThreadLocal,即线程局部变量,用来为每一个使用它的线程维护一个独立的变量副本.这种变量只在线程的生命周期内有效.并且与锁机制那种以时间换取空间的做法不同,ThreadLocal没有任何锁机制 ...
- 【vue】父子组件间通信----传函数
(一)子组件 调用 父组件 方法 方式一) 子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child&g ...
- ARM Cortex-M底层技术(2)—启动代码详解
杂谈 工作了一天,脑袋比较乱.一直想把底层的知识写成一个系列,希望可以坚持下去.为什么要写底层的东西呢?首先,工作用到了这部分内容,最近和内部Flash打交道比较多,自然而然会接触到一些底层的东西:第 ...
- 关于webpack高版本向低版本切换 如何切换?
卸载:npm uninstall webpack -g 重新安装:npm install webpack@3.7.1 -g 直接安装指定版本就行了,如安装 2.4.1 版:cnpm install w ...
- X-MAS CTF 2018 - Crypto - Hanukkah
参考链接 https://ctftime.org/task/7321 https://github.com/VoidHack/write-ups/tree/master/X-MAS%20CTF%202 ...