Ajax技术使用补充
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技术使用补充的更多相关文章
- 在 PHP 中结合 Ajax 技术进行图片上传
前面几则日志中讲述了在 PHP 中上传文件,相信大家对 PHP 中如何进行文件上传已经初步掌握.本文来继续探讨在 PHP 中上传文件的技术,不同的是,本次上传将仅限于图片文件的上传,并且将采用 Aja ...
- 你真正的了解Ajax?Ajax技术简述
Ajax技术是目前在浏览器中通过JavaScript脚本可以使用的所有技术的集合.Ajax并没有创造出某种具体的新技术,它所使用的大多数技术都是在很多年以前就已经存在了,然而Ajax以一种崭新的方式来 ...
- Ajax技术使用之ajax与模态框结合的妙用
Ajax技术使用之ajax与模态框结合的妙用 要求: 使用ajax的方式提交数据:https://www.cnblogs.com/-wenli/p/10470063.html 使用模态框完成增加数据, ...
- Ajax技术使用(一)
Ajax技术使用 目录 AJAX介绍 XMLHttpRequest 请求和响应 onreadystatechange 事件 AJAX介绍 什么是 AJAX AJAX = 异步 JavaScript 和 ...
- Ajax技术基础
对于AJAX技术,感觉以前虽然用过但是对于AJAX没有一个清晰的认识,今天专门总结一下,希望掌握的更加牢固吧! 一,什么是AJAX? AJAX通常被叫做异步刷新技术,其实他也是可以同步的.主要都用于异 ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- Json介绍与Ajax技术
AJAX AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据 ...
- 使用ajax技术实现txt弹出在页面上
使用ajax技术实现txt弹出在页面上 使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...
- 《所用到的AJAX技术基础》
来自百度网页,w3cshool网页:AJAX = Asychronous JavaScript and XML,翻译成中文为:异步的JavaScript XML. 异步的意思就是不重新加载整个页面,后 ...
随机推荐
- 《深入理解Oracle 12c数据库管理(第二版)》PDF
一:下载获取位置: 二:本书图样: 三:本书目录: 图书目录: 第1章 安装Oracle 1.1 了解OFA 1.1.1 Oracle清单目录 1.1.2 Oracle基础目录 1.1.3 Oracl ...
- Confluence 6 属性的一个活动
为了启用属性,使用上面描述的方法.针对所有的用户,属性每一个访问的页面,将会在你的应用服务器中进行记录,直到你对 Confluence 进行重启.请注意每次用户访问一个链接,一个单一的属性将会被打印出 ...
- vue-列表嵌套
- C++ Primer 笔记——类成员指针
1.当我们初始化一个成员指针或为成员指针赋值时,该指针并没有指向任何数据.成员指针指定了成员而非成员所属的对象,只有当解引用成员指针时,我们才提供对象信息. 2.和普通的函数指针类似,如果成员存在重载 ...
- 005-Python字典
Python字典(dict) 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号{}中: ...
- 小程序:最难点For的wx:key
转自:http://www.wxappclub.com/topic/536 A:数据改变,导致重新渲染的两种情况: 1:有wx:key的情况(不重新创建,仅改变顺序) 添加元素或改变元素顺序导致数据改 ...
- XmlSerializer 实现序列化CDATA
[XmlIgnore] public string GuestRemarks { get; set; } [XmlElement("GuestRemarks")] public X ...
- Visual Studio 2017 IDE之xml过大报错
XML处理时遇到这个错误 在powershell中输入 $vsWherePath = Join-Path ${env:ProgramFiles(x86)} "Microsoft Visual ...
- linux改权限
改变文件夹本身权限,不改动子文件(夹) chmod 600 my/ 改变文件夹及子目录下所有文件(夹)权限 chmod -R 777 my/ 统一修改 cd my 修改文件夹权限为755 find - ...
- bzoj 5099: [POI2018]Pionek
题解: 还是比较简单的一道题 考虑现在有一个向量,当且仅当下一个向量与它夹角<90度这个向量的模长才会增加 接下来怎么做呢 如果我们去枚举初始向量,向量方向会随着新增向量而变化 随着不断顺时针的 ...