前端知识笔记(三十七)———Django与Ajax

news/2024/10/31 2:21:33/

特点:

        异步提交

        局部刷新

例子:github注册

动态获取用户名实时的跟后端确认并实时的展示到前端(局部刷新) 

朝后端发送请求的方式
        1.浏览器地址栏直接输入url回车 -----》get请求

        2.a标签的href属性  -----》get请求

        3.form表单 -----》get请求、post请求

        4.ajax -----》 get请求、post请求

真正的ajax原生,需要使用js操作,jq的ajax方法是对原生js的封装,方便咱们使用

(其他框架也可以,原理是一样的)

前后端混合项目中,我们通常使用jq的ajax实现 js和后端异步交互
        jq操作dom
        jq发ajax请求
前后端分离项目中,我们会使用另一个第三方库,实现 js和后端异步交互(axios)
 

写一个例子:

页面上有三个input框,前两个框输入数字,点击提交,朝后端发送ajax请求,后端计算出结果再返回给前端,动态展示到第三个input框中,整个页面不能刷新,也不能在前端计算

html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<input type="text" id="d1">+<input type="text" id="d2">=<input type="text" id="d3">
<button id="btn">提交</button>
<script>// 先给按钮一个点击事件$('#btn').click(function (){// 朝后端发送ajax请求$.ajax({// 1.指定朝哪个后端发送ajax请求url:'', // 不写就是朝当前地址提交// 2.请求方式type:'post', // 不指定就是get,都是小写// 3.数据data:{'l1':$('#d1').val(),'l2':$('#d2').val()},// 4.回调函数:当后端给你返回结果的时候会自动触发 args接收后端返回的结果success:function (args) {$('#d3').val(args)}})})
</script>
</body>
</html>

views代码

from django.shortcuts import render,HttpResponsedef ab_ajax(request):if request.method=='POST':l1 = request.POST.get('l1')l2 = request.POST.get('l2')#先转成整型再加l3=int(l1)+int(l2)return HttpResponse(l3)return render(request,'ajax.html')

前后端传输数据的编码格式(contentType)
因为get请求数据就是直接放在url后面的(url?user=kk$pwd=123),所以主要看下post请求的编码格式

向后端发送post请求的方式
        1.form表单

        2.ajax请求

前后端传输数据的编码格式

        urlencoded

        formdata

        json

        form表单

默认的编码格式是urlencoded

数据格式:user=kk&pwd=123        

Django后端针对符合urlencoded编码格式的数据会自动帮你解析封装到request.POST中 

user=kk&pwd=123     --------》   request.POST

如果把编码格式改成formdata,那么针对普通的键值对还是解析到request.POST中, 而将文件解析到request.FILES中

form表单是没办法发送json格式数据的 

ajax默认的编码格式是urlencoded

ajax发送json格式数据
html代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="d1">点我</button>
<script>$('#d1').click(function () {$.ajax({url:'',type:'post',data:JSON.stringify({'username':'kk','age':12}),contentType:'application/json',  //指定编码格式success:function () {}})})
</script>
</body>
</html>

views代码

import jsonfrom django.shortcuts import renderdef login(request):return render(request,'login.html')def ab_json(request):#针对json格式的数据需要自己手动处理if request.is_ajax(): #判断是不是ajax的请求json_bytes=request.body #拿到一个字符串类型json_dict=json.loads(json_bytes)  #传入的二进制的数据会内部自动解码再反序列化print(json_dict)return render(request,'ab_json.html')

ajax发送json格式数据需要注意点

        1.contentType参数指定成:applicaton/json

        2.数据是真正的json格式数据

        3.Django后端不会帮你处理json格式数据,需要你自己去request.body获取并处理

ajax发送文件

1.  ajax发送文件需要借助于js内置对象FormData

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<p>username<input type="text" id="d1"></p>
<p>password<input type="text" id="d2"></p>
<p><input type="file" id="d3"></p>
<button id="d4">点我</button>
<script>//点击按钮朝后端发送普通键值对和文件数据$('#d4').on('click',function () {//需要先利用FormData内置对象let formDataObj=new FormData();//2 添加普通的键值对formDataObj.append('username',$('#d1').val());formDataObj.append('password',$('#d2').val());//3添加文件对象formDataObj.append('myfile',$('#d3')[0].file[0]);//4将对象基于发送给后端$.ajax({url:'',type:'post',data:formDataObj, //直接将对象放在data后面即可//ajax发送文件必须指定两个参数contentType:false, //不需使用任何编码,Django后端都能自动识别formdata对象processData: false, //告诉你的浏览器不要对你的数据进行任何处理success:function () {}})})
</script>
</body>
</html>

2.  ajax发送文件必须指定两个参数:
            contentType:false,  //不需使用任何编码,Django后端都能自动识别formdata对象
            processData: false,  //告诉你的浏览器不要对你的数据进行任何处理
3.  Django后端能够直接识别formdata对象并且能够将内部的普通键值自动解析并封装到request.POST中,文件数据自动解析并封装到request.FILES中


http://www.ppmy.cn/news/1262721.html

相关文章

考研真题数据结构

【2018年山西大学真题】试编写一个算法&#xff0c;使之能在数组L【1&#xff5e;n】中找到最小元素。 &#xff08;1&#xff09;给出算法的基本思想。 &#xff08;2&#xff09;根据设计思想&#xff0c;给出描述算法。 &#xff08;3&#xff09;分析所给算法的时间复杂…

Spring Cloud切换内嵌Tomcat为宝兰德Application Server

目录 替换Tomcat中间件Tomcat是什么Spring Cloud剔除tomcat引入宝兰德Application Server打包运行授权导入 替换Tomcat中间件 Tomcat是什么 Spring Cloud剔除tomcat <!--集成springmvc框架 --><dependency><groupId>org.springframework.boot</groupId&…

算法与数据结构--最短路径Dijkstra算法

题目&#xff1a; 算法与数据结构实验题 10.20 迷路 ★实验任务 学长经常迷路&#xff0c;现在他又遇到问题了&#xff0c;需要求救。 假设他有一张地图&#xff0c;上面有N个点&#xff0c;M条路&#xff0c;他现在在编号为S的地方&#xff0c;想要去编号为E的地方&#x…

学会用bash在linux写脚本 (一)

本章主要介绍如何使用bash写脚本。 了解通配符 了解变量 了解返回值和数值运算 grep的用法是“grep 关键字 file”&#xff0c;意思是从file中过滤出含有关键字的行。 例如&#xff0c;grep root /var/log/messages&#xff0c;意思是从/var/log/messages 中过滤出含有root …

3D点云:平面模型上提取凸(凹)多边形方法

目录 一、实现原理 二、实现代码 三、运行结果 一、实现原理 首先要在点云中提取出潜在平面,对原始点云数据进行滤波,根据提取出的平面模型系数从滤波后的点云进行投影,然后根据投影后的点云计算其对应的二维凹(凸)多边形。 二、实现代码 #in

Springboot+FastJson实现解析第三方http接口json数据为实体类(时间格式化转换、字段包含中文)

场景 若依前后端分离版手把手教你本地搭建环境并运行项目&#xff1a; 若依前后端分离版手把手教你本地搭建环境并运行项目_前后端分离项目本地运行-CSDN博客 在上面搭建SpringBoot项目的基础上&#xff0c;并且在项目中引入fastjson、hutool、lombok等所需依赖后。 系统需…

Qt内存管理、UI编辑器、客制化组件、弹出对话框、常用部件类

头文件的小技巧 #include <QtWidgets> // 在自动生成的 .h 里面加上此句 适用条件&#xff1a; QT 的内存管理 当父窗体被关闭时&#xff0c;子部件的内存会自动释放。 对象树是一种管理对象生命周期的机制。当一个对象被添加到另一个对象的子对象列表中时&#xff0…

maven环境搭建

maven历史版本下载&#xff1a;https://archive.apache.org/dist/maven/ 新建系统变量编辑Path&#xff0c;添加bin目录mvn -v测试查看版本号conf目录下新建repository文件夹&#xff0c;作为本地仓库 settings.xml <?xml version"1.0" encoding"UTF-8&…