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. IE浏览器下用JS创建文件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. SpringBoot使用RestTemplate 摘要认证

    SpringBoot使用RestTempate SpringBoot使用RestTemplate摘要认证 SpringBoot使用RestTemplate基础认证 SpringBoot使用RestTe ...

  3. [Python3] 010 字符串：给你们看看我的内置方法 第二弹

    目录 少废话,上例子 1. isidentifier() 2. islower() 3. isnumeric() 4. isprintable() 5. isspace() 6. istitle() ...

  4. 面试题思考：Stack和Heap的区别 栈和堆的区别

    堆栈的概念: 堆栈是两种数据结构.堆栈都是一种数据项按序排列的数据结构,只能在一端(称为栈顶(top))对数据项进行插入和删除.在单片机应用中,堆栈是个特殊的存储区,主要功能是暂时存放数据和地址,通常 ...

  5. HDU 1069 Monkey and Banana dp 题解

    HDU 1069 Monkey and Banana 纵有疾风起 题目大意 一堆科学家研究猩猩的智商,给他M种长方体,每种N个.然后,将一个香蕉挂在屋顶,让猩猩通过 叠长方体来够到香蕉. 现在给你M种 ...

  6. A + B Problem II（1002）

    Problem Description I have a very simple problem for you. Given two integers A and B, your job is to ...

  7. HDU2188选拔自愿者

    悼念512汶川大地震遇难同胞--选拔志愿者 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  8. UVA 12849 Mother’s Jam Puzzle( 高斯消元 )

    题目: http://uva.onlinejudge.org/external/128/12849.pdf #include <bits/stdc++.h> using namespace ...

  9. 使用IP在局域网内访问System.Net.HttpListenerException:“拒绝访问。”

    记录一下,自己写的程序之前运行没有遇到这个问题,突然遇到这个问题,找了一圈没有找到有效的解决方案,到最后发现,以管理员身份运行程序即可.简单记录一下. 还有就是 .UseUrls("http ...

  10. C#传特定的值，获得特定的数组排序

    一,在实际业务中,我们会有当我们传任何值进来时,我们要有特定的排序,,比如传进来的是"生物", "历史","化学", 但实际上我们需要的是& ...