Django框架(十二)-- Djang与Ajax
一、什么是Ajax
AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据)。
- 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
- 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
二、Ajax的特点
1、异步
客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求
2、局部刷新
例如:
邮箱没写,会局部刷新邮箱区域,判断邮箱
三、Ajax优点
- AJAX使用 Javascript 技术向服务器发送异步请求
- AJAX无须刷新整个页面
四、 基于jquery的Ajax使用
1、基本语法
// 在templates模板层使用 $.ajax({url:'/index/',type:'post',//data:往后台提交的数据data:{'name':'lqz','age':18},//成功的时候回调这个函数success:function (data) {alert(data)} })
2、完整使用语法
<!-- 先导入jQuery --> <script src="/static/jquery-3.3.1.js"> </script> <button class="send_Ajax">send_Ajax</button> <script>$(".send_Ajax").click(function(){$.ajax({url:"/handle_Ajax/",type:"POST",data:{username:"Yuan",password:123},success:function(data){console.log(data)},error: function (jqXHR, textStatus, err) {console.log(arguments);},complete: function (jqXHR, textStatus) {console.log(textStatus);},statusCode: {'403': function (jqXHR, textStatus, err) {console.log(arguments);},'400': function (jqXHR, textStatus, err) {console.log(arguments);}}})})</script>
3、利用ajax提交表单中的数据
<p><input type="text" name="add1" id="add1">+<input type="text" name="add2" id="add2">=<input type="text" name="sum" id="sum"></p> <button class="btn">点我</button><script>$('.btn').click(function(){$.ajax({url:'add',type:'post',// 通过 .val() 获取值data:{'add1':$('#add1').val(),'add2':$('#add2').val},success:function(data){// 将数据写在val(data)中,可以赋值$('#sum').val(data)location.href='/index/'}})}) </script>
五、Ajax的执行流程
六、基于ajax进行文件上传
1、请求头ContentType
(1)application/x-www-form-urlencoded方式
这是最常见的 POST 提交数据的方式了。浏览器的原生 <form> 表单,如果不设置 enctype
属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据。
(2)multipart/form-data方式
这又是一个常见的 POST 数据提交的方式。我们使用表单上传文件时,必须让 <form> 表单的 enctype
等于 multipart/form-data
上面提到的这两种 POST 数据的方式,都是浏览器原生支持的,而且现阶段标准中原生 <form> 表单也只支持这两种方式(通过 <form> 元素的 enctype 属性指定,默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain,不过用得非常少)。
(3)application/json方式
现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。
2、基于Form表单上传文件
(1)模板层
<!-- 必须指定 enctype="multipart/form-data" --> <form action="/files/" method="post" enctype="multipart/form-data"><p>用户名:<input type="text" name="name" id="name"></p><!-- 必须指定type="file" --><p><input type="file" name="myfile" id="myfile"></p><input type="submit" value="提交"> </form> <button id="btn">ajax提交文件</button><script>$("#btn").click(function () {// 上传文件,必须用FormDatavar formdata=new FormData();formdata.append('name',$("#name").val());// 取出文件$("#myfile")[0].files拿到的是文件列表,取第0个把具体的文件取出来formdata.append('myfile',$("#myfile")[0].files[0]);$.ajax({url:'/files_ajax/',type:'post',// 告诉jQuery不要去处理发送的数据,(name=lqz&age=18)processData:false,// 指定往后台传数据的编码格式(urlencoded,formdata,json)// 现在用formdata对象处理了,就不需要指定编码格式了,不要编码了contentType:false,data:formdata,success:function (data) {alert(data)}})}) </script>
(2)视图层
def add_file(request):if request.method=='GET':return render(request,'add_files.html')# 这是个字典dic_files=request.FILESmyfile=dic_files.get('myfile')with open(myfile.name,'wb') as f:# 循环上传过来的文件for line in myfile:# 往空文件中写 f.write(line)return HttpResponse('ok')def files_ajax(request):# 提交文件从,request.FILES中取,提交的数据,从request.POST中取name=request.POST.get('name')print(name)dic_files = request.FILESmyfile = dic_files.get('myfile')with open(myfile.name, 'wb') as f:# 循环上传过来的文件for line in myfile:# 往空文件中写 f.write(line)return HttpResponse('ok')
(3)路由层
url(r'^files/$', views.add_file), url(r'^files_ajax/', views.files_ajax),
注意点:
1、基于form表单上传文件,需要指定编码格式,那么ajax一样也是,首先我们先创建一个FormData的一个对象 2、我们通过append方法,给对象传值append(value1,value2),相当于value1=value2 3、processData:false, # 告诉jQuery不要去处理发送的数据contentType:false, # 告诉jQuery不要去设置Content-Type请求头 4、processData的值只能是布尔值,因为这时的data的值,是一个对象,所以不需要进行处理了
六、基于ajax提交json格式数据
1、模板层
<form ><p>用户名:<input type="text" name="name" id="name"></p><p>密码:<input type="password" name="pwd" id="pwd"></p><input type="submit" value="提交"> </form><button id="btn">ajax提交json格式</button> </body><script>$('#btn').click(function () {var post_data={'name':$("#name").val(),'pwd':$("#pwd").val()};console.log(typeof post_data);//JSON.stringify相当于python中json.dumpus(post_data),把数据装换位json格式字符串//pos是个json格式字符串var pos=JSON.stringify(post_data);console.log(typeof pos);$.ajax({url:'/json/', // url这里为空的话,默认向该页面发出ajax请求 type:'post', // type值为空的话,默认为get方法data:pos,contentType:'application/json',dataType:'json',success:function (data) {//如果data是json格式字符串,如何转成对象(字典)?//data=JSON.parse(data)console.log(typeof data)console.log(data.status)/*console.log(data)var ret=JSON.parse(data)console.log(typeof ret)console.log(ret.status)*///alert(data)}})}) </script>
2、视图层
def add_json(request):if request.method=='GET':return render(request,'json.html')print(request.POST)print(request.GET)print(request.body)import json# res是个字典res=json.loads(request.body.decode('utf-8'))print(res)print(type(res))dic={'status':'100','msg':'登录成功'}# return HttpResponse('ok')# 返回给前台json格式# return HttpResponse(json.dumps(dic))return JsonResponse(dic)
3、路由层
url(r'^json/', views.add_json),
总结:
1、如果是文件,就先创建一个FormData对象,以key,value的位置,参传数进去在ajax方法里,data对应的值就是这个FormData对象,所以在processData的值应该为false,contentType的值也为false(让jquery不设置请求头)注意:它文件在后面中request.FILES里面,如果有其他input框所对应的value,它的值在POST中取 2、如果不是上传文件,就是form表单的里input的话,就直接传了,contentType默认为urlencoded编码方法 3、json格式数据,首先是把对象给造出来,并且把数据放里面,然后转换成json格式字符串,这里contentType必须为'application/json',这样它的的数据在request.body里,是二进制格式 4、在前端接收到后台json格式数据,可以在ajax那里写dataType:'json',它会自动转换成对象
转载于:https://www.cnblogs.com/zhangbingsheng/p/10663808.html
Django框架(十二)-- Djang与Ajax相关推荐
- Django框架(二十)—— Django rest_framework-认证组件
Django rest_framework-认证组件 一.什么是认证 只有认证通过的用户才能访问指定的url地址,比如:查询课程信息,需要登录之后才能查看,没有登录,就不能查看,这时候需要用到认证组件 ...
- 二十二、深入Ajax技术(下篇)
@Author:Runsen @Date:2020/6/2 作者介绍:Runsen目前大三下学期,专业化学工程与工艺,大学沉迷日语,Python, Java和一系列数据分析软件.导致翘课严重,专业排名 ...
- Django 第十二课 【class meta】
Class meta: 通过一个内嵌类 "class Meta" 给你的 model 定义元数据, 类似下面这样: class Foo(models.Model): bar = m ...
- Vue.js 学习笔记 十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
- Django笔记十二之defer和only
本篇笔记将介绍查询中的 defer 和 only 两个函数的用法,笔记目录如下: defer only 1.defer defer 的英语单词的意思是 延迟.推迟,我们可以通过将字段作为参数传入,可以 ...
- Django(十二)模型表关系的实现
Django框架 (十二)模型表关系的实现 前言准备 在数据库中,我们知道很多表之间是有着关联的,也就是我们常说的一对一,多对多,一对多.所以我们需要使用到外键,对于多对多的表,我们还需要考虑到中间表 ...
- liunx+python+django框架实现图片生成二维码
点击箭头处"蓝色字",免费领测试技术及面试资料! 余生皆欢喜 liunx+python+django框架实现二维码生成器 首先我简单的介绍下django:django官网解释就是如 ...
- Django框架简介-开头
一.MVC框架和MTV框架(了解即可) MVC,全名是Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model).视图(View)和控制 ...
- Python学习笔记--10.Django框架快速入门之后台管理admin(书籍管理系统)
Python学习笔记--10.Django框架快速入门之后台管理 一.Django框架介绍 二.创建第一个Django项目 三.应用的创建和使用 四.项目的数据库模型 ORM对象关系映射 sqlite ...
- 第十二章 Django框架
第十二章 Django框架 tcp/ip五层模型 应用层 传输层 网络层 数据链路层 物理层 socket : 套接字,位于应用层和传输层之间的虚拟层,是一组接口 c/s架构 ------> b ...
最新文章
- 史上最烂的项目:苦撑 12 年,600 多万行代码!
- NR 5G RRC连接重建
- Tableau研学小课堂(part1)--商业智能概述
- 可应用于实际的14个NLP突破性研究成果(三)
- 30天提升技术人的写作力-第二十三天
- Gridview模板中提供的删除功能
- 分享一个通过项目管理师证书成功办理北京户口的励志经验
- 你知道Excel中身份证号码提取年龄的公式吗?
- 启动docker容器时报iptables failed: iptables --wait -t nat -A DOCKER -p tcp -d 0/0 --dport错误
- Github黑暗模式正式发布,Reddit直接飙至4k高赞
- 洛谷 P4147 玉蟾宫
- 十五、IO流【黑马JavaSE笔记】(本文文中记录了个人学习感受)
- Linux下服务器开发的必要准备
- 各大主流BBS论坛程序简介
- Compound 治理——执行队列 TimeLock
- cocos 中每个节点的visit与draw函数
- VSCode调试leetcode的cpp以及c语言(windows)
- MacOS 检查 pkg包的安装路径
- 5个最佳React动画库
- 基于c语言的物业管理系统设计,基于C#语言的小区物业管理系统的设计与实现
热门文章
- Javascript 对象二(Number、String、Boolean、Array、Date、Math、RegExp)
- 深入了解crc32算法
- write() vs. writev()
- java实现输出字符串中的数字字符
- linux input/output error
- [NodeJs] 如果发现node_modules中有个模块代码有bug,你该怎么办?
- [react] childContextTypes是什么?它有什么用?
- React开发(237):dva概念2state
- 前端学习(3314):redux的基本操作2
- Leetcode刷题(4)罗马数字转整数