Ajax技术使用补充

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

发送字符串或数字

  1.  $.ajax({
  2.             url:"/ajax_test.html/",
  3.             type:'POST',
  4.             data:{'v1':1,'v2':2},
    　　　　　　　dataType:'JSON',
  5.             success:function(arg){
  6.                 console.log(arg);
  7.             }
  8.         })

发送数组

v=[1,2,3,4]

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

  1.  $.ajax({
  2.             url:"/ajax_test.html/",
  3.             type:'POST',
  4.             data:{'list':v},
    　　　　　　　dataType:'JSON',
  5.             traditional:true,
  6.             success:function(arg){
  7.                 console.log(arg);
  8.             }
  9.         })

　

发送字典

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

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

  1.  $.ajax({
  2.             url:"/ajax_test.html/",
  3.             type:'POST',
  4.             data:{'dict':JSON.stringify(dict)},
  5. 　　　　　　　dataType:'JSON',
  6.             success:function(arg){
  7.                 console.log(arg);
  8.             }
  9.         })

　　

关键参数解析：

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

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

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

二、示例

HTML

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     {%load staticfiles%}
  6.     <script src="{% static '/js/jquery/jquery-3.3.1.js' %}"></script>
  7.     <title>Title</title>
  8. </head>
  9. <body>
  10. <select id="Click" multiple>
  11.     <option value="老师1">1</option>
  12.     <option value="老师2">2</option>
  13.     <option value="老师3">3</option>
  14.     <option value="老师4">4</option>
  15. </select>
  16.     <br>
  17.     <input type="submit" id="Btntest">
  18. <script>
  19.      $(function(){
  20.         bindEvent();
  21.     });
  22.     <!--#绑定函数-->
  23.     function bindEvent(){
  24.         $('#Btntest').click(function(){
  25.             var v=$('#Click').val();
  26.             console.log(v)
  27.  
  28.             $.ajax({
  29.             url:"/ajax_test.html/",
  30.             type:'POST',
  31.             data:{'list':v},
  32.             traditional:true,
  33.             success:function(arg){
  34.                 console.log(arg);
  35.             }
  36.         })
  37.  
  38.         }
  39.         )}
  40.  
  41. </script>
  42. </body>
  43. </html>

　　

视图函数：

  1. def ajax_test(request):
  2.     value=request.POST.getlist('list')
  3.     print(value)
  4.     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. python 之面向对象的三大特性

    面向对象的三大特性 继承 继承和组合 继承进阶 封装 封装(有待完善) 多态 多态

  2. mabatis的批量新增sql 初级的 初级的 初级的

    简单描述:做开发的时候,会遇到一次插入好多条记录,怎么做好呢? 解决思路:循环insert啊!  哪凉快那呆着去←!←  这样会增加数据库开销的,当然不能这么干了,要在sql上下功夫.看代码,一下就明 ...

  3. bzoj 5418

    这是拓展crt的典型应用 在你开始做之前,我一定要告诉你一件事情:虽然这道题看着和拓展crt模板很像,但他俩是有巨大的区别的!不要直接把板子改吧改吧扔上去! 题目模型:求解模线性方程组 其中p1,p2 ...

  4. Java基础之多线程框架

    一.进程与线程的区别 1.定义: 进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位. 线程是进程的一个实体,是CPU调度和分派的基本单位,它是比 ...

  5. JMeter 提供了六种定时器

    JMeter提供了六种定时器,下面让我们一起来学习下JMeter的定时器. 先明确一些概念: 1)定时器是在每个sampler(采样器)之前执行的,而不是之后: 是的,你没有看错,不管这个定时器的位置 ...

  6. PV-UV-QPS

    QPS:每秒查询率(Query Per Second) ,每秒的响应请求数,也即是最大吞吐能力.QPS = req/sec = 请求数/秒QPS统计方式 [一般使用 http_load 进行统计]QP ...

  7. JQuery调用WCF服务

    一:创建一个wcf服务项目 [ServiceContract] public interface IService1 { [OperationContract] [WebInvoke(RequestF ...

  8. ExceptionLess本地环境部署

    1.先去看看github上面本地流程说明 https://github.com/exceptionless/Exceptionless/wiki/Self-Hosting 比较总要的环境有 NET 4 ...

  9. 去除ArrayList集合中的重复自定义对象元素

    要求去除ArrayList集合中重复的Student的对象(什么叫重复,所有属性值都相同叫做重复). 思路: 1.创建一个新集合 2.遍历旧集合中的每一个元素,去新集合中找这个元素,如果这个元素不存在 ...

  10. Lambda表达式树构建（上）

    概述 Lambda是C#常用的语句,采用委托等方式,来封装真实的代码块.Lambda其实就是语法糖,是一个匿名函数,是一种高效的类似于函数式编程的表达式,Lambda简化了开发中需要编写的代码量.它可 ...