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. Git-第四篇廖雪峰Git教程学习笔记（3）远程仓库，克隆远端库

    1.本次连接的是gitHub仓库. 1>创建SSH Key. ssh-keygen -t rsa -C "youremail@example.com" lfy@lfy-PC ...

  2. java变量的类型

    变量的类型 一 按数据类型分: 1.基本数据类型 : 整型 : byte (1字节 -   (-128  ~  127)) short (2字节) int (4字节) long (8字节) 浮点型 : ...

  3. 小白学Python（16）——pyecharts 绘制地理图表 Geo

    Geo-基本示例 from example.commons import Faker from pyecharts import options as opts from pyecharts.char ...

  4. log.info（）传入多个参数的方法

    不知道项目里用的是啥 ** 版本的 log4j 居然不能传入变长参数 logger.info(String.format("%s %s %s", username, feature ...

  5. vue自定义指令获取焦点及过滤器修改时间

    <template id="comp3"> <div id="app"> <model :list="selectedl ...

  6. 线程局部变量ThreadLocal实现原理

    ThreadLocal,即线程局部变量,用来为每一个使用它的线程维护一个独立的变量副本.这种变量只在线程的生命周期内有效.并且与锁机制那种以时间换取空间的做法不同,ThreadLocal没有任何锁机制 ...

  7. 【vue】父子组件间通信----传函数

    (一)子组件 调用 父组件 方法 方式一) 子组件中通过this.$parent.event来调用父组件的方法 父组件 <template> <div> <child&g ...

  8. ARM Cortex-M底层技术(2)—启动代码详解

    杂谈 工作了一天,脑袋比较乱.一直想把底层的知识写成一个系列,希望可以坚持下去.为什么要写底层的东西呢?首先,工作用到了这部分内容,最近和内部Flash打交道比较多,自然而然会接触到一些底层的东西:第 ...

  9. 关于webpack高版本向低版本切换 如何切换？

    卸载:npm uninstall webpack -g 重新安装:npm install webpack@3.7.1 -g 直接安装指定版本就行了,如安装 2.4.1 版:cnpm install w ...

  10. X-MAS CTF 2018 - Crypto - Hanukkah

    参考链接 https://ctftime.org/task/7321 https://github.com/VoidHack/write-ups/tree/master/X-MAS%20CTF%202 ...