Ajax技术使用补充

一、Ajax发送数据的几种形式

发送字符串或数字

 $.ajax({

            url:"/ajax_test.html/",

            type:'POST',

            data:{'v1':1,'v2':2},
　　　　　　　dataType:'JSON',

            success:function(arg){

                console.log(arg);

            }

        })

发送数组

v=[1,2,3,4]

加上traditional参数，可以发送数组，经常用在多选框。

 $.ajax({

            url:"/ajax_test.html/",

            type:'POST',

            data:{'list':v},
　　　　　　　dataType:'JSON',

            traditional:true,

            success:function(arg){

                console.log(arg);

            }

        })

　

发送字典

dict={'k1':1,'k2':2}

将字典转为字符串串进行发送

 $.ajax({

            url:"/ajax_test.html/",

            type:'POST',

            data:{'dict':JSON.stringify(dict)},

　　　　　　　dataType:'JSON',

            success:function(arg){

                console.log(arg);

            }

        })

　　

关键参数解析：

dataType:'JSON'：服务端返回序列化的数据时，ajax自动进行反序列化。

traditional：我们可以通过设置traditional 为true阻止深度序列化，然后序列化结果如下：

list： [1,2,3,4]    =>   list：list=1&list=2&list=3&list=4

二、示例

HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    {%load staticfiles%}

    <script src="{% static '/js/jquery/jquery-3.3.1.js' %}"></script>

    <title>Title</title>

</head>

<body>

<select id="Click" multiple>

    <option value="老师1">1</option>

    <option value="老师2">2</option>

    <option value="老师3">3</option>

    <option value="老师4">4</option>

</select>

    <br>

    <input type="submit" id="Btntest">

<script>

     $(function(){

        bindEvent();

    });

    <!--#绑定函数-->

    function bindEvent(){

        $('#Btntest').click(function(){

            var v=$('#Click').val();

            console.log(v)

            $.ajax({

            url:"/ajax_test.html/",

            type:'POST',

            data:{'list':v},

            traditional:true,

            success:function(arg){

                console.log(arg);

            }

        })

        }

        )}

</script>

</body>

</html>

　　

视图函数：

def ajax_test(request):

    value=request.POST.getlist('list')

    print(value)

    return render(request,"ajax_test.html")

　

选择1，2，3　

Ajax技术使用补充的更多相关文章

  1. 在 PHP 中结合 Ajax 技术进行图片上传

    前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...

  2. 你真正的了解Ajax？Ajax技术简述

    Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合.Ajax并没有创造出某种具体的新技术,它所使用的大多数技术都是在很多年以前就已经存在了,然而Ajax以一种崭新的方式来 ...

  3. Ajax技术使用之ajax与模态框结合的妙用

    Ajax技术使用之ajax与模态框结合的妙用 要求: 使用ajax的方式提交数据:https://www.cnblogs.com/-wenli/p/10470063.html 使用模态框完成增加数据, ...

  4. Ajax技术使用(一)

    Ajax技术使用 目录 AJAX介绍 XMLHttpRequest 请求和响应 onreadystatechange 事件 AJAX介绍 什么是 AJAX AJAX = 异步 JavaScript 和 ...

  5. Ajax技术基础

    对于AJAX技术,感觉以前虽然用过但是对于AJAX没有一个清晰的认识,今天专门总结一下,希望掌握的更加牢固吧! 一,什么是AJAX? AJAX通常被叫做异步刷新技术,其实他也是可以同步的.主要都用于异 ...

  6. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  7. Json介绍与Ajax技术

    AJAX   AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据 ...

  8. 使用ajax技术实现txt弹出在页面上

    使用ajax技术实现txt弹出在页面上   使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...

  9. 《所用到的AJAX技术基础》

    来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...

随机推荐

  1. MONGODB数据基础与命令

  2. PHP之十六个魔术方法

    1.__construct,__destruct__constuct构建对象的时被调用:__destruct明确销毁对象或脚本结束时被调用:2.__get,__set__set当给不可访问或不存在属性 ...

  3. 【python】confluent_kafka将offset置为最大

    该博文方法有问题,正确方案在http://www.cnblogs.com/dplearning/p/7992994.html 将指定group对应的offset重置到最大值,跳过未消费数据 代码如下: ...

  4. hashlib、logging模块

    hashlib模块 hashlib提供了常见的摘要算法,如md5和sha1等等. 那么什么是摘要算法呢?摘要算法又称为哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固定的数据串(通 ...

  5. npm run build 打包后（直接打包白屏），如何运行在本地查看效果（Apache服务）

    转载: https://www.cnblogs.com/qiu-Ann/p/7477593.html 目前,使用vue-cli脚手架写了一个前端项目,之前一直是使用npm run dev 在8080端 ...

  6. 部署MySQL5.7时的权限问题

    本周部署MySQL5.7的时候遇到这样的问题,在初始化的时候,总是失败,并且报错: 2019-01-09T09:47:13.957685Z 0 [ERROR] InnoDB: Operating sy ...

  7. K8s-Pod

    一:Pod-资源对象概述 Pod是k8s系统中可以创建和管理的最小单元,是资源对象模型中由用户创建或部署的最小资源对象模型,也是在k8s上运行容器化应用的资源对象,其他的资源对象都是用来支撑或者扩展P ...

  8. 饮冰三年-人工智能-Python-16Python基础之迭代器、生成器、装饰器

    一:迭代器: 最大的特点:节省内存 1.1 迭代器协议 a:对象必须提供一个next方法, b:执行方法要么返回迭代中的下一项,要么抛弃一个Stopiteration异常, c:只能向后不能向前. 1 ...

  9. Django_Admin操作

    Django_Admin 创建Django_Admin 管理账户 D:\github\Django_Aadmin>python manage.py createsuperuser Usernam ...

  10. [转] webpack之前端性能优化（史上最全，不断更新中。。。）

    最近在用webpack优化首屏加载性能,通过几种插件之后我们上线前后的速度快了一倍,在此就简单的分享下吧,先上个优化前后首屏渲染的对比图. 可以看到总下载时间从3800ms缩短到1600ms. 我们在 ...