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. java面向对象基础总结

    本周学习了java面向对象的一些基本概念,介绍了它三个主要特性,封装性.继承性.多态性,类与对象的关系,栈堆的关系,三个特性中主要讲了封装性,其他两个后面再讲. 类实际上是表示一个客观世界某类群体的一 ...

  2. C语言作业总结

    .## 一.我学到的内容 二.我的收获 作业 学到的知识点简介 C语言I博客作业01 学习了markdown语法. C语言I博客作业02 学习了<提问的智慧>. C语言I博客作业03 了解 ...

  3. 手把手教你用Pytorch-Transformers——部分源码解读及相关说明（一）

    一.简介 Transformers是一个用于自然语言处理(NLP)的Python第三方库,实现Bert.GPT-2和XLNET等比较新的模型,支持TensorFlow和PyTorch.本文介对这个库进 ...

  4. JAVA总结--java基本语法

    static :静态的~ static :静态变量.静态方法: 被修饰的成员变量或者方法独立于该类的任何对象,只要该类被加载,被修饰的成员变量或者方法就存在并可以使用.  用public修饰的stat ...

  5. SCUT - 37 - 手速帝CZK - 分块

    https://scut.online/p/37 一开始想到要根号分块预处理,但是不太懂具体怎么写.想不到如此暴力. #include<bits/stdc++.h> using names ...

  6. spark复习笔记(4):spark脚本分析

    1.[start-all.sh] #!/usr/bin/env bash # # Licensed to the Apache Software Foundation (ASF) under one ...

  7. 前端开发JavaScript入门——JavaScript介绍&基本数据类型

    JavaScript 诞生于1995年,它的出现主要是用于处理网页中的 前端验证. • 所谓的前端验证,就是指检查用户输入的内容是否符合一定的 规则. • 比如:用户名的长度,密码的长度,邮箱的格式等 ...

  8. 用URLGather来管理和保存你的页面

    下载链接:http://url-gather.software.informer.com/download/#downloading 安装的过程简单,这里不一一叙述. 安装成功后,找到软件安装的路径, ...

  9. openstack stein部署手册 3. keystone

    # 建立数据库用户及权限 create database keystone; grant all privileges on keystone.* to keystone@'localhost' id ...

  10. JavaScript实现生成指定范围随机数和一个包含不重复数的随机数组

    目前JavaScript里面还没有现成的方法可以实现这个简单地需求,我们就需要自己写代码了. 在js中有个函数:Math.random() 这个函数可以生成 [0,1) 的一个随机数. 我们的简单的改 ...