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序列化—炒鸡好用的更多相关文章

  1. jquery中使用serialize() 序列化表单时 中文乱码问题

    序列化中文时之所以乱码是因为.serialize()调用了encodeURLComponent方法将数据编码了 解决方法就是进行解码 1 原因:.serialize()自动调用了encodeURICo ...

  2. JQuery中serialize() 序列化

    更多2014/8/24 来源:jquery学习浏览量:1671 学习标签: serialize 本文导读:在jQuery中,当我们使用ajax时,常常需要拼装input数据以键值对(Key/Value ...

  3. jQuery DataTables && Django serializer

    jQuery DataTables https://www.datatables.net 本文参考的官方示例 http://datatables.net/release-datatables/exam ...

  4. 【jQuery基础学习】05 jQuery与Ajax以及序列化

    好吧,这章不像上章那么水了,总是炒剩饭也不好. 关于AJAX 所谓Ajax,全名Asynchronous JavaScript and XML.(也就异步的JS和XML) 简单点来讲就是不刷新页面来发 ...

  5. JQuery中的工具函数总结

    前提引入 前提当然也是要引入Jquery啦... <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" typ ...

  6. JQuery中ajax的相关方法总结

    前提条件 话说是jquery中的ajax方法,那么前提条件当然是引入jquery啦. <script src="http://libs.baidu.com/jquery/1.9.0/j ...

  7. jQuery中的100个技巧

      1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. < ...

  8. Ajax_04之jQuery中封装的Ajax函数

    1.PHP中json_encode编码规则: PHP索引数组编码为JSON:[...] PHP关联数组编码为JSON:{...}2.jQuery中AJAX封装函数之load: ①使用:$('选择器') ...

  9. Jquery中的Ajax

    AJAX: * jQuery中的Ajax * 封装第一层 - 类似于原生Ajax的用法 * $.ajax() - 最复杂 * 选项 * url - 请求地址 * type - 请求类型,默认为GET ...

随机推荐

  1. flume 进阶

    一.flume事务 put事务流程: 1.doPut:将批量数据先写入临时缓冲区putList 2.doCommit:检查Channel内存队列是否足够, (1)达到一定时间没有数据写入到putLis ...

  2. ajax传文件用express的multer接住

    html部分: //input type设为file <input type="file" name="file" id="fileInputE ...

  3. HDU-1181 变形课(多种方式，好题)

      首先想到的是并查集,然后WA...原因在这,我第一次敲的是Find(1) == Find(12)来作为可以成功的条件,实际上这样是不行的,比方说 bell 和 mail实际上是不满足条件的,可以理 ...

  4. 获取Http请求IP的工具类

    public class IpAddressUtil { public static String getIpAddr(HttpServletRequest request){ String ipAd ...

  5. Javascript 原型链之原型对象、实例和构造函数三者之间的关系

    前言:用了这么久js,对于它的原型链一直有种模糊的不确切感,很不爽,隧解析之. 本文主要解决的问题有以下三个: (1)constructor 和 prototype 以及实例之间啥关系? (2)pro ...

  6. Elasticsearch Java Low Level REST Client（嗅探器）

    https://segmentfault.com/a/1190000016828977?utm_source=tag-newest#articleHeader0 嗅探器 允许从正在运行的Elastic ...

  7. Linux性能优化从入门到实战：12 内存篇：Swap 基础

    内存资源紧张时,可能导致的结果 (1)OOM 杀死大内存CPU利用率又低的进程(系统内存耗尽的情况下才生效:OOM 触发的时机是基于虚拟内存,即进程在申请内存时,如果申请的虚拟内存加上服务器实际已用的 ...

  8. pwd 显示当前所在的工作路径

    1.功能说明 pwd命令是“print working directory ”首字母缩写,显示当前目录的绝对路径. 2.语法格式 pwd [option] pwd 选项 3.命令参数 参数 参数说明 ...

  9. [CQOI2015]网络吞吐量（网络流+SPFA）

    [CQOI2015]网络吞吐量 题目描述 路由是指通过计算机网络把信息从源地址传输到目的地址的活动,也是计算机网络设计中的重点和难点.网络中实现路由转发的硬件设备称为路由器.为了使数据包最快的到达目的 ...

  10. nginx windows 代理 80端口 500

    今天准备配置一个nginx 用来代理80端口分别访问.net core 和spring boot 服务器 配置使用的最基本的代理配置 #user nobody; worker_processes 1; ...