ajax与python后端交互
ajax简介
ajax可以在页面不刷新的情况下可以与后端进行数据交互，异步提交，局部刷新。
比如百度的注册页面，我并没有点击提交它就提醒我用户已存在了。
ajax不是一门全新知识，本质就是一些js代码，我们学习ajax直接使用jQuery封装之后的版本(语法更加简单)，使用ajax的前提必须要引入jQuery文件。
使用
前端中，ajax里的请求携带的数据一般用字典类型，便于后端接收并使用。
$.ajax({
url:'', // 页面请求地址，不写就是当前地址
type:'post', // 请求方式，不写默认为get请求
data:{'data':'data'}, // 请求携带的数据
success:function (args) { // 异步回调函数，后端有回复时触发，args接收后端传来的数据
}
})
后端使用request.is_ajax()判断是否是ajax请求，并要使用Httpresponse返回给ajax异步回调函数中的形参。
def index(request):
if request.is_ajax(): # 判断是否是ajax请求
return Httpresponse('返回给ajax的数据')
return render(request, 'index.html')
案例
让输入框后面来一段内容可以跟着输入框实时变化。
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>用户名<input id="username" type="text"><span id="name" style="color:red;"></span></p>
<script>
$('#username').on('input', function () {
let data = $(this).val()
$.ajax({
url: '',
type: 'post',
data: {'username':data},
success: function (args) {
$('#name').text(args)
}
})
})
</script>
</body>
</html>
后端：
def index(request):
if request.is_ajax(): # 判断是否是ajax请求
if request.method == 'POST':
data = request.POST
return HttpResponse(data.get('username'))
return render(request, 'index.html')
前后端传输数据编码格式
前端传输数据编码格式可以从按F12查看网络请求。
form表单默认发送的编码格式
Content-Type：application/x-www-form-urlencoded。
数据格式举例：username=jason&password=123。
django后端会自动处理到request.POST接收。
form表单发送文件
Content-Type：multipart/form-data。
数据格式：隐藏不让看。
django后端会自动处理：request.POST接收其他，request.FILES接收文件信息。
ajax默认的编码格式
Content-Type：application/x-www-form-urlencoded。
数据格式举例：username=jason&password=123。
django后端会自动处理到request.POST接收。
ajax发送json格式数据
Content-Type：application/json
数据格式举例：username=jason&password=123。
django后端只会用request.body接收。
ajax发送json格式数据
ajax发送的数据类型一定要跟数据的编码格式一致，如果想要发送json格式数据就需要用到json数据的编码格式application/json。
$.ajax({
url: '',
type: 'post',
contentType: 'application/json', // 不写,默认是urlencoded编码
data: JSON.stringify({'name': 'tom'}), // 序列化方法
success: function (args) {
}
})
后端只能用request.body接收，接收还需要反序列化。
def index(request):
if request.is_ajax():
if request.method == 'POST':
import json
res = json.loads(request.body) # 反序列化
print(res)
return HttpResponse('666')
return render(request, 'index.html')
ajax携带文件数据
ajax如果想要把文件传给后端，需要利用js内置对象FormData，并且ajax需要额外指定两个参数。
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<input id="file" type="file">
<button id="btn">提交</button>
<script>
$('#btn').click(function () {
let myFormData = new FormData()
// 对象添加文件数据
myFormData.append('my_file', $('#file')[0].files[0])
$.ajax({
url: '',
type: 'post',
// 携带文件必须要指定的两个参数
contentType: false,
processData: false,
data: myFormData,
success: function (args) {
}
})
})
</script>
</body>
</html>
后端要用request.FILES获取
def index(request):
if request.is_ajax():
if request.method == 'POST':
# 获取文件信息
print(request.FILES.get('my_file'))
return render(request, 'index.html')
回调机制处理策略
如果使用python视图函数种其他的返回方法，比如render()、redirect()、JsonResponse()，ajax同样可以接收到。
render()和redirect()返回的是一个页面，ajax接收的数据是网页的原生代码。
JsonResponse()返回的是一个json格式数据，ajax会自动反序列化并接收。
ajax与python后端交互的更多相关文章
- 把数据转化为JSON格式用ajax进行前后端交互
接着在https://www.cnblogs.com/dong973711/p/10907733.html的基础上做验证. 从前端提交数据 前端页面,submit.html <!DOCTYPE ...
- struts2、ajax实现前后端交互
跳过struts2环境搭建部分,或者可以看我的博客(http://www.cnblogs.com/zhangky/p/8436472.html),里面有写,很详细. 需要导入的jar包(struts官 ...
- Python 利用三个简易模块熟悉前后端交互流程
准备工作 在学习Django之前,先动手撸一个简单的WEB框架来熟悉一下前后端交互的整体流程 本次用到的模块: 1.wsgiref,这是一个Python自带的模块,用于构建路由与视图 2.pymysq ...
- SSM-网站后台管理系统制作（4）---Ajax前后端交互
前提:Ajax本身就为前后端交互服务的,实现功能:用户输入信息,实时判断用户的情况,这也是现在登录界面普遍流行的做法.前端js通过注释识别Controller层,该层查询返回,和之前Google验证码 ...
- Django之前后端交互使用ajax的方式
1. 在项目中前后端数据相互是一种常态, 前后端交互使用的是ajax请求和form表单的请求两种方式" ajax与form表单的区别在于: form 是整个页面刷新提交的, 但是ajax ...
- 一、Django前后端交互之Ajax和跨域问题
一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Jav ...
- thinkphp+jquery+ajax前后端交互注册验证
thinkphp+jquery+ajax前后端交互注册验证,界面如下 register.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- 前端ajax的各种与后端交互的姿势
前端中常常用的与后端交换数据的话,通常是要用到ajax这种方法的 但是交互的方式有很多种,很多取决于你后端的属性,我这儿主要列举我目前项目比较常用的两种方式 --一个是我们通用的web api和控制器 ...
- ajax学习----json，前后端交互，ajax
json <script> var obj = {"name": "xiaopo","age": 18,"gender ...
随机推荐
- 论文解读（XR-Transformer）Fast Multi-Resolution Transformer Fine-tuning for Extreme Multi-label Text Classification
Paper Information Title:Fast Multi-Resolution Transformer Fine-tuning for Extreme Multi-label Text C ...
- python pymysql连接数据库并创建表
之前看菜鸟教程 #!/usr/bin/python3 import pymysql # 打开数据库连接 db = pymysql.connect("localhost"," ...
- git总是需要输入用户名密码问题解决
解决办法: git bash进入你的项目目录,输入: git config --global credential.helper store 然后你会在你本地生成一个文本,上边记录你的账号和密码.当然 ...
- react在移动端的自适应布局
react+flexible适配布局 (1)npm i lib-flexible --save (2)npm i postcss-px2rem --save (3)在 node_modules/rea ...
- springboot项目找不到符号问题以及模块聚合项目maven插件使用的相关问题
问题如图 更换maven,清空缓存重新导入依赖依然无效后 解决方法: 方式一:删除项目中.idea文件夹,重新打开项目,选中jdk版本 ,重新导入依赖即可. 最近又遇到找不到符号问题,本地运行没问题, ...
- 2021.12.07 P4291 [HAOI2008]排名系统（Treap）
2021.12.07 P4291 [HAOI2008]排名系统(Treap) https://www.luogu.com.cn/problem/P4291 双倍经验: https://www.luog ...
- OV5640图像采集（一）VGA显示
vga控制器模块 1 引言 项目的背景是采集无人车间现场的工件图像并送往控制间pc端处理,最终实现缺陷检测.项目包括图像采集模块,数据传输模块,上位机,缺陷检测算法等四个部分.其中,图像采集模块又分 ...
- C/C++游戏项目：中国程序员一定要会的中国象棋教程
中国象棋是中国一种流传十分广泛的游戏. 下棋双方根据自己对棋局形式的理解和对棋艺规律的掌握,调动车马,组织兵力,协调作战在棋盘这块特定的战场上进行着象征性的军事战斗. 象棋,亦作"象碁&qu ...
- Mysql 计算地址经纬度距离实时位置
前言 最近在做项目时候,遇到一个这样子的需求, 点到卡包里面卡券使用使用,需要展示卡券使用附近门店, 思路 数据库地址表设计 通用的区域街道地址表tz_sys_area 字段名称 类型 备注 area ...
- 『现学现忘』Git基础 — 19、在Git中进行忽略文件操作
目录 1.忽略文件说明 2.忽略文件的原则 3..gitignore忽略规则 4.忽略文件的三种方式 (1)忽略单个仓库中的文件(远程共用) (2)忽略单个仓库中的文件(本地使用) (3)全局忽略 1 ...