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

特点:

        异步提交

        局部刷新

例子: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.mzph.cn/news/208497.shtml

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

相关文章

pcl-3 pcl结合opencv做svm分类(法向量特征数据)

后续使用了fpfh特征作为训练数据&#xff0c;遇到了一些困难 首先是flann冲突&#xff0c;这个将opcv中的flann都改成了flann2就可以运行 后面在将得到的33特征值进行训练的时候一直内存超限&#xff0c;传输的不太好&#xff0c;到现在还是不行&#xff0c;改了三天还是没有改…

Flink 系列文章汇总索引

Flink 系列文章 一、Flink 专栏 本专栏系统介绍某一知识点&#xff0c;并辅以具体的示例进行说明。 本专栏的文章编号可能不是顺序的&#xff0c;主要是因为写的时候顺序没统一&#xff0c;但相关的文章又引入了&#xff0c;所以后面就没有调整了&#xff0c;按照写文章的顺…

OpenCL学习笔记(三)手动编译开发库(win10+mingw64)

前言 有的小伙伴仍然在使用mingw编译器&#xff0c;这时只能重新编译opencl的sdk库。本文档简单记录下win10下&#xff0c;使用mingw11.20编译的过程&#xff0c;有需要的小伙伴可以参考下 一、安装所需软件 1.安装git&#xff0c;教程比较多&#xff0c;不再重复 2.安装cm…

chrome安装jsonview

写在前面 通过jsonview可以实现&#xff0c;当http响应时application/json时直接在浏览器格式化显示&#xff0c;增加可读性。本文看下如何安装该插件到chrome中。 1&#xff1a;安装 首先在这里 下载插件包&#xff0c;然后解压备用。接着在chrome按照如下步骤操作&#xf…

千锋 Vue 详细笔记整理

视频笔记是根据B站 千锋 涛哥 - SpringBootvue前后端分离项目《锋迷商城》实战课-完结版 进行整理的 笔记可上 gitee仓库 自取 千锋 Vue 笔记整理 一、vue 的简介1.1 使用 JQuery 的复杂性问题1.2 VUE 简介1.2.1 前端框架1.2.2 MVVM 二、 vue 入门使用2.1 vue 的引入2.2 入门案…

WPF(Windows Presentation Foundation)的 StatusBar控件

WPF&#xff08;Windows Presentation Foundation&#xff09;的 StatusBar 是一种用于显示状态栏的控件。状态栏是用于向用户提供应用程序的状态信息或其他相关信息的区域。它通常位于应用程序窗口的底部&#xff0c;并提供一些常见的功能&#xff0c;如显示进度、状态文本、通…

[C#] 基于 yield 语句的迭代器逻辑懒执行

众所周知, C# 可以通过 yield 语句来快速向 IEnumerator 或者 IEnumerable 类型的方法返回值返回一个元素. 但它还有另外一个特性, 就是其内部逻辑的懒执行. 每两个 yield 语句之间的逻辑都是一个状态, 只有在调用迭代器的 MoveNext 方法后, 才会执行下一个状态的逻辑. 在文章中…

泽攸科技二维材料转移台的应用场景及优势

随着二维材料的广泛研究和各种潜在应用的开发&#xff0c;对于二维材料样品的精密操控与转移的需求日益增加。特别是一些新型二维材料的制备和器件集成制备中&#xff0c;需要在显微镜下对样品进行观察与定位&#xff0c;并能够在微米甚至纳米量级上精确移動和转移样品。 传统…

集简云 x 零售企业丨快速集成有赞商城和微盛企微管家,实现私域运营自动化

客户介绍 某公司是一家知名的饮料厂商&#xff0c;自1998年成立以来&#xff0c;一直致力于研发和生产各种热门饮品&#xff0c;如果汁、碳酸饮料、矿泉水等。因其独特的口感和健康的品质深受消费者的喜爱。企业拥有多个知名品牌&#xff0c;享有极高的品牌知名度和市场份额。该…

BGP综合

1、使用PreVal策略&#xff0c;确保R4通过R2到达192.168.10.0/24。 2、使用AS_Path策略&#xff0c;确保R4迪过R3到达192.168.11.0/24。 3、配置MED策略&#xff0c;确保R4通过R3到达192.168.12.0/24。 4、使用Local Preference策略&#xff0c;确保R1通过R2到达192.168.1.0…

Mac电脑系统管理:iStat Menus中文 for Mac

iStat Menus是一款强大而灵活的系统监控工具&#xff0c;可以帮助Mac用户实时监控和管理自己的电脑。它提供了丰富的系统状态和性能指标&#xff0c;可自定义的菜单栏图标以及历史数据记录功能&#xff0c;让用户能够全面了解和掌握电脑的运行情况。 实时系统监控&#xff1a;i…

Django的Auth模块

Auth模块 我们在创建好一个Django项目后执行数据库迁移命令会自动生成很多表 其中有auth_user等表 Django在启动之后就可以直接访问admin路由&#xff0c;需要输入用户名和密码&#xff0c;数据参考的就是auth_user表&#xff0c;并且必须是管理员才能进入 依赖于a…

flink1.12.4消费kafka 报错 The coordinator is not available

报错 You should retry committing the latest consumed offsets. Caused by: org.apache.kafka.common.errors.CoordinatorNotAvailableException: The coordinator is not available. 但是任务还在正常跑. 开源bug [FLINK-28060] Kafka Commit on checkpointing fails rep…

12.8 作业 C++

使用手动连接&#xff0c;将登录框中的取消按钮使用qt4版本的连接到自定义的槽函数中&#xff0c;在自定义的槽函数中调用关闭函数 将登录按钮使用qt5版本的连接到自定义的槽函数中&#xff0c;在槽函数中判断ui界面上输入的账号是否为"admin"&#xff0c;密码是否为…

一篇文章熟练掌握 Axios

Axios是什么 Axios是一个基于Promise的网络请求库&#xff0c;作用于node.js和浏览器中。在服务端使用原生node.js http模块&#xff0c;在客户端使用XMLHttpRequest。是基于Promise对Ajax的封装。 Axios的特性 从浏览器创建XMLHttpRequests从node.js创建http请求支持Promis…

基于OpenCV的人脸识别系统案例

基于OpenCV的人脸识别系统案例 人脸识别简介代码实现案例应用情况 下面将介绍如何使用Python和OpenCV库构建一个简单但强大的人脸识别系统。人脸识别是计算机视觉领域的一个重要应用&#xff0c;具有广泛的实际用途&#xff0c;从安全门禁到娱乐应用。 人脸识别简介 人脸识别是…

MySQL - 表达式With as 语句的使用及练习

目录 8.1 WITH AS 的含义 8.2 WITH AS语法的基本结构如下&#xff1a; 8.3 练习题1 8.4 牛客练习题 8.1 WITH AS 的含义 WITH AS 语法是MySQL中的一种临时结果集&#xff0c;它可以在SELECT、INSERT、UPDATE或DELETE语句中使用。通过使用WITH AS语句&#xff0c;可以将一个查…

量子芯片技术:未来的计算革命

量子芯片技术&#xff1a;未来的计算革命 一、引言 随着科技的不断发展&#xff0c;人类正在进入一个全新的技术时代&#xff0c;即量子时代。量子芯片技术作为这个时代的重要代表&#xff0c;正逐渐改变我们对计算和信息处理的理解。本文将深入探讨量子芯片技术的基本原理、…

Navicat 技术指引 | 适用于 GaussDB 分布式的服务器对象的创建/设计

Navicat Premium&#xff08;16.3.3 Windows版或以上&#xff09;正式支持 GaussDB 分布式数据库。GaussDB分布式模式更适合对系统可用性和数据处理能力要求较高的场景。Navicat 工具不仅提供可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结构…

Java入门 EditPlus的安装与配置讲解

写Java程序不建议使用EditPlus&#xff0c;首选idea社区版&#xff0c;其次是vscode&#xff0c; 然后是eclipse 。editplus说实话排不上号。 但既然小伙伴想了解一下怎么配置&#xff0c;这里就简单说一下。 下载 首先是jdk&#xff0c;jdk是Java开发和运行的基础&#xff…