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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/412950.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

javascript 将table导出 Excel ,可跨行跨列

原文地址&#xff1a;https://www.cnblogs.com/hailexuexi/p/10795887.html <script language"JavaScript" type"text/javascript">//jQuery HTML导出Excel文件(兼容IE及所有浏览器)function HtmlExportToExcel(tableid,file_name) {var filename fi…

[css] css怎么更改表单的单选框或下拉框的默认样式?

[css] css怎么更改表单的单选框或下拉框的默认样式&#xff1f; 下拉框select可以通过appearance:none去除默认样式&#xff0c;然后进行自定义&#xff0c;但是option标签不能通过CSS自定义&#xff0c;所以最佳方案是自定义标签重写select单选框隐藏input标签&#xff0c;自定…

wampserver 搭建 php环境 运行方法

大家好&#xff0c;我是烤鸭&#xff1a;今天分享的是如何用wamp 运行 php代码。1. wampserver下载&#xff1a;下载地址&#xff1a;https://sourceforge.net/projects/wampserver/files/WampServer%203/WampServer%203.0.0/Addons/Php/wampserver3_x64_addon_php7.2.7.exe…

Mysql数据库查询当前操作的数据库名

查询数据库名&#xff1a; select database()查询表结构&#xff1a; select * from INFORMATION_SCHEMA.TABLES where TABLE_NAME表名 and table_schema (select database())

redis的学习使用,第二章

在IDEA里面使用redis&#xff0c;使用架包 jedis-2.4.2.jar 1 public class Main {2 3 public static void main(String[] args) {4 Jedis jedis new Jedis("127.0.0.1",6379);5 //string类型6 jedis.set("java","aga…

[css] 你了解css3的currentColor吗?举例说明它的作用是什么?

[css] 你了解css3的currentColor吗&#xff1f;举例说明它的作用是什么&#xff1f; currentColor是 color 属性的值&#xff0c;具体意思是指&#xff1a;currentColor关键字的使用值是 color 属性值的计算值。如果currentColor关键字被应用在 color 属性自身&#xff0c;则相…

java php des加密 byte数组16进制 DESTools

大家好&#xff0c;我是烤鸭:今天分享的是java 和 php des 加密。因为接口对接&#xff0c;难免不同语言&#xff0c;加密又是必不可少的。作为接口的提供方&#xff0c;必须把加密规则写好&#xff0c;最好有不同语言的加密demo。1. java版本的des加密解密工具类DESTools.j…

BDD框架之Cucumber研究

BDD框架之Cucumber研究 引用链接&#xff1a;http://kongqingyun123.blog.163.com/blog/static/6377283520134158437813/ Cucumber是BDD&#xff08;行为驱动开发&#xff09;中成熟的一个框架&#xff0c;官方网址: http://cukes.info/1、cucumber安装1、安装ruby2、gem insta…

Oracle修改字段的顺序

一&#xff1a;简单粗暴 1,Oracle: create table CFORM_COULUMN_2 as &#xff08;select 字段A,字段B from CFORM_COULUMN);2,Sqlserver select 字段A,字段B.... into CFORM_COULUMN_2 from CFORM_COULUMN二&#xff1a;通过SYS数据库更新字段顺序 1&#xff0c;查询表…

[css] 怎么去掉点击a链接或者图片出现的边框?

[css] 怎么去掉点击a链接或者图片出现的边框&#xff1f; a{text-decoration:none} img{border:0 none}个人简介 我是歌谣&#xff0c;欢迎和大家一起交流前后端知识。放弃很容易&#xff0c; 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题

springboot 2.x tomcat war包部署 localhost-startStop-1 启动卡顿卡死

大家好&#xff0c;我是烤鸭&#xff1a; 关于springboot war包部署tomcat。环境&#xff1a;springboot 2.0.3.RELEASEapache-tomcat-8.5.321. 修改pom <?xml version"1.0" encoding"UTF-8"?> <project xmlns:xsi"http://www.w3.org…

高可用Eureka注册中心配置说明(双机部署)

目 录 1. 高可用EureKa注册中心示意图 2. Eureka实例相互注册配置 3. 微服务注册到Eureka配置 4. 启动步骤及配置成功检查 5. 说明事项 1. 高可用EureKa注册中心示意图 Spring Cloud的Eureka Server的高可用实际上就是将自己作为服务向其他服注册中心注册自己&#xff0c;形成…

sql 把特定数据排在最前面

第一法】 select * from table where nameD UNION ALL select * from table where name<>D 第二法】SELECT CASE WHEN [name]D THEN 0 ELSE 1 END FLAG,* FROM TABLE order by flag asc

[css] css的linear-gradient有什么作用呢?

[css] css的linear-gradient有什么作用呢&#xff1f; 概念&#xff1a;线性渐变,向下/向上/向左/向右/对角方向,为了创建一个线性渐变&#xff0c;你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时&#xff0c;你也可以设置一个起点和一个方向&#xff…

elasticsearch 6.x (四) 单一文档 API 介绍和使用 index和get API

大家好&#xff0c;我是烤鸭&#xff1a;今天分享的是官网6.x 单一文档(Single document APIs)APIs。本文这是部分翻译&#xff0c;如果想看全部的&#xff0c;还是建议阅读官方api。链接&#xff1a;https://www.elastic.co/guide/en/elasticsearch/reference/current/docs…

Dockerfile语法

Dockerfile 语法示例 Dockerfile语法由两部分构成&#xff0c;注释和命令参数 # Line blocks used for commentingcommand argument argument ..一个简单的例子&#xff1a; # Print "Hello docker!"RUN echo "Hello docker!"Dockerfile 命令 Dockerfile有…

[css] 会引起Reflow和Repaint的操作有哪些?

[css] 会引起Reflow和Repaint的操作有哪些&#xff1f; 页面布局和几何信息(比如&#xff1a;增加删除dom&#xff0c;改变元素位置或者尺寸等)发生改变时&#xff0c;会触发Reflow。 给dom节点添加样式&#xff0c;会触发Repaint。 触发Reflow一定会引起Repaint&#xff0c;触…

Centos7离线安装Mysql8

一&#xff0c;下载tar包 1&#xff0c;直接下载&#xff1a;https://dev.mysql.com/get/Downloads/MySQL-8.0/mysql-8.0.15-1.el7.x86_64.rpm-bundle.tar 2&#xff0c;百度网盘&#xff1a;https://pan.baidu.com/s/1V180rx0FVFuUOrnPMqrVpQ 提取码&#xff1a;08jx 二&…

[css] 你有用过clip-path吗?说说你对它的理解和它都有哪些运用场景?

[css] 你有用过clip-path吗&#xff1f;说说你对它的理解和它都有哪些运用场景&#xff1f; clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域它的值可以为以下几种: 用 表示剪切元素的路径: 一种形状&#xff0c;其大小和位置由<几何盒>值定义。如果没有…

elasticsearch 6.x (五) 单一文档 API 介绍和使用 update和delete API

大家好&#xff0c;我是烤鸭&#xff1a;今天分享的是官网6.x 单一文档(Single document APIs)APIs。本文这是部分翻译&#xff0c;如果想看全部的&#xff0c;还是建议阅读官方api。链接&#xff1a;https://www.elastic.co/guide/en/elasticsearch/reference/current/docs…