Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用
1 ajax发送其他请求
1 写在form表单 submit和button会触发提交 <form action=""> </form> 注释
2 使用input 类型为 button <input type="button" id="id_btn" value="提交">
1 大坑
-如果在form表单中，写button和input是submit类型，会触发form表单的提交
-如果不想触发：
-不写在form表单中
-使用input，类型是button
<form action="">
<p>用户名：<input type="text" id="id_name"></p>
<p>密码：<input type="password" id="id_password"></p>
{# <button id="id_btn">提交</button>#}
<input type="button" id="id_btn" value="提交">
</form>
// 登录成功，重定向百度，前端重定向
location.href='http://www.baidu.com'
location.href='/index/'
2 坑
-后端响应格式如果是：html/text格式，ajax接收到数据后需要自己转成对象
res = JSON.parse(data) // 不是json格式需要手动解析
-后端响应格式是：json，ajax接收到数据后会自动转成对象
-总结：后端返回数据，统一都用JsonResponse
3 坑
-如果使用了ajax，后端就不要返回rediret,render,HttpResponse
-直接返回JsonResponse
2 上传文件（ajax和form两种方式）
默认请求编码格斯为：urlencoded 上传文件需要使用格式：enctype="multipart/form-data"
1 http --post--请求，有编码格式，主流有三种
-urlencode：默认的 ----> 从request.POST取提交的数据
-form-data：上传文件的 ----> 从request.POST取提交的数据,request.FILES中取文件
-json：ajax发送json格式数据 ----> 从request.POST取不出数据
2 使用ajax和form表单，默认都是urlencode格式
3 如果上传文件：form表单格式 enctype=
4 如果编码方式是urlencode格式，放到body体(请求体)中数据格式如下： ajax预处理数据
username=lqz&password=123
<body>
<h1>form表单上传文件</h1>
<form action="" method="post" enctype="multipart/form-data">
<p>用户名：<input type="text" name="name"></p>
<p>文件：<input type="file" name="myfile"></p>
<input type="submit" value="提交">
</form>
<h1>ajax上传文件</h1>
<p>用户名：<input type="text" id="id_name"></p>
<p>文件：<input type="file" id="id_myfile"></p>
<button id="id_btn">提交</button>
</body>
<script>
$('#id_btn').click(function (){
// 如果ajax要上传文件，需要借助于一个js的formdata对象
var formdata=new FormData() // 实例化得到一个FormData对象
formdata.append('name',$('#id_name').val()) // 追加了一个name对应填入的值
// 追加文件
var file=$('#id_myfile')[0].files[0]
formdata.append('myfile',file)
$.ajax({
url: '/file_upload/',
method: 'post',
// 上传文件，一定要注意如下两行
processData: false, // 不预处理数据,
contentType: false, // 不指定编码格式 使用FormData对象的默认编码就是formdata格式
data: formdata,
success: function (data){
console.log(data)
}
})
})
</script>
$('#id_myfile')[0] # jQuery对象转成原生input
$('#id_myfile')[0].files # 所有的文件
$('#id_myfile')[0].files[0] # js中的文件对象
def file_upload(request):
if request.method=='GET':
return render(request,'file_upload.html')
else:
name = request.POST.get('name')
myfile=request.FILES.get('myfile')
print(type(myfile)) # 查看类型 <class 'django.core.files.uploadedfile.InMemoryUploadedFile'>
from django.core.files.uploadedfile import InMemoryUploadedFile
with open(myfile.name,'wb') as f:
for line in myfile:
f.write(line)
return HttpResponse('上传成功')
2.1 form表单上传文件
2.2 ajax上传文件
2.3 后端
2.4 路由
3 ajax上传json格式
3.1 前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
{# <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">#}
{# <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>#}
</head>
<body>
<h1>ajax提交json格式</h1>
<p>用户名：<input type="text" id="id_name"></p>
<p>密码: <input type="password" id="id_password"></p>
<button id="id_button">提交</button>
</body>
<script>
$('#id_button').click(function () {
$.ajax({
url: '/ajax_json/',
method: 'post',
contentType: 'application/json', // 指定编码格式
data: JSON.stringify({
name: $('#id_name').val(),
password: $('#id_password').val()
}), // json格式字符串 相当于python中json.dumps
success: function (data) {
console.log(data)
}
})
})
</script>
</html>
3.2 后端
def ajax_json(request):
if request.method == 'GET':
return render(request, 'ajax_json.html')
else:
# json格式，从POST中取不出来
name=request.POST.get('name')
print(type(request.POST)) # <class 'django.http.request.QueryDict'>
# from django.http.request import QueryDict
print(name)
# 在body体中，b格式
request.data = json.loads(request.body)
name = request.data.get('name')
password = request.data.get('password')
print(name)
print(password)
return HttpResponse('ok')
4 Django内置序列化（了解）
Django内置的serializers（把对象序列化成json字符串）
from django.core import serializers
from django.core import serializers
def test(request):
book_list = Book.objects.all()
ret = serializers.serialize("json", book_list)
return HttpResponse(ret)
把对象转成json格式字符串，Django内置的不好用，字段不能控制
目前阶段，要做序列化，for循环拼列表套字典
l = []
for user in user_list:
l.append({'name':user.name,'password':user.password})
return JsonResponse(l,safe=False)
5 分页器的使用
### 批量插入数据
def books_page(request):
# 第一种方案，每循环一次，操作一下数据库，性能低
# for i in range(1000):
# book= models.Books.objects.create(name='图书%s' % i, price=i+10, publish='东京出版社')
# 第二种方案，批量插入
book_list = []
for i in range(1000):
book = models.Books(name='图书%s' % i, price=i+10, publish='东京出版社')
book_list.append(book)
models.Books.objects.bulk_create(book_list,batch_size=100)
return HttpResponse('ok')
1 Django的分页器（paginator）简介
在页面显示分页数据，需要用到Django分页器组件
from django.core.paginator import Paginator
Paginator对象： paginator = Paginator(user_list, 10)
# per_page: 每页显示条目数量
# count: 数据总个数
# num_pages:总页数
# page_range:总页数的索引范围，如: (1,10),(1,200)
# page: page对象
page对象：page=paginator.page(1)
# has_next 是否有下一页
# next_page_number 下一页页码
# has_previous 是否有上一页
# previous_page_number 上一页页码
# object_list 分页之后的数据列表
# number 当前页
# paginator paginator对象
from django.core.paginator import Paginator
# def books_page(request):
# current_num = int(request.GET.get('page_num',1)) # 如果请求不到当前页 返回第一页
# book_list= models.Books.objects.all()
# paginator=Paginator(book_list,50)
# # Paginator对象的属性
# print(paginator.count) # 数据总条数
# print(paginator.num_pages) # 总页数
# print(paginator.per_page) # 每页显示条目数量
# print(paginator.page_range) # 总页数的索引范围 range(1, 101)
# # print(paginator.page(1)) # 第一页
# # page对象的属性和方法
# # has_next 是否有下一页
# # next_page_number 下一页页码
# # has_previous 是否有上一页
# # previous_page_number 上一页页码
# # object_list 分页之后的数据列表
# # number 当前页
# page = paginator.page(current_num)
# print(page.has_next())
# print(page.next_page_number())
# print(page.has_previous())
# print(page.previous_page_number())
# print(page.object_list)
# print(page.number)
#
# return render(request,'book_page.html',locals())
def books_page(request):
current_num = int(request.GET.get('page_num',1))
book_list= models.Books.objects.all()
paginator=Paginator(book_list,50)
page = paginator.page(current_num)
return render(request,'book_page.html',locals())
练习
1 使用ajax发送post请求，完成注册功能，注册成功，跳转到登录，登录成功跳转到百度
2 使用ajax上传文件，保存到项目路径的media路径下（登录成功才能上传文件）
3 使用ajax上传json格式数据，写一个装饰器，实现不论前端以什么格式传递数据，我从视图函数中都从request.data中取值 （POST的数据）
def json_parser(func):
def inner(request,*args,**kwargs):
if request.method == 'POST':
try:
request.data=json.loads(request.body) # json格式
except Exception as e:
request.data=request.POST # 其他两种格式
res = func(request,*args,**kwargs)
return res
return inner
@json_parser
def test_json(request):
if request.method == 'GET':
return render(request,'test_json.html')
else:
print(request.data)
return HttpResponse('ok')
补充
json.loads(b'dfdasfda')
问题：json可以直接loads bytes格式吗？
-3.5之前不可以
-3.6以后可以
回顾
1 ajax
$.ajax({
url:'/test/',
method:'get/post',
contentType:'application/json',
//processData:false,
//contentType:false,
data:json格式字符串，字典对象，formdata对象,
success:function(){
//data的类型取决于，后端返回时指定的响应类型
...
}
})
2 上传文件（form表单，ajax）
3 提交json格式，后端无论是什么格式
4 登录注册功能Django学习——ajax发送其他请求、上传文件（ajax和form两种方式）、ajax上传json格式、 Django内置序列化（了解）、分页器的使用的更多相关文章
- Android手机上监听短信的两种方式
Android手机上监听短信有两种方式: 1. 接受系统的短信广播,操作短信内容. 优点:操作方便,适合简单的短信应用. 缺点:来信会在状态栏显示通知信息. AndroidManifest.xml: ...
- [Android]解决3gwap联网失败：联网请求在设置代理与直连两种方式的切换
[Android]解决3gwap联网失败:联网请求在设置代理与直连两种方式的切换 问题现象: 碰到一个问题,UI交互表现为:联通号码在3gwap网络环境下资源一直无法下载成功. 查看Log日志,打印出 ...
- vue 路由传参 params 与 query两种方式的区别
初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了: router文件下index.js里面,是这么定义路由的: { p ...
- [Swift]Alamofire：设置网络请求超时时间【timeout】的两种方式
两种方式作用相同,是同一套代码的两种表述. 第一种方式:集聚. 直接设置成员属性(全局属性),这种方法不能灵活修改网络请求超时时间timeout. 声明为成员属性: // MARK: - 设置为全局变 ...
- AntDesign VUE：上传组件自定义限制的两种方式（Boolean、Promise）
AntD上传组件 AntDesign VUE文档 第一种方式 beforeUpload(file) { let isLt = true if (filesSize) { isLt = file.siz ...
- （jquery+ajax）省市区三级联动（封装和不封装两种方式）-----2017-05-14
首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...
- 【TP3.2 + 其他任何PHP框架】编辑、删除、添加数据，返回原分页 （ajax+form两种方式提交均可以）
1.目的1:在如下的一个页面中,p=2,比如我们删除数据id=13,通过ajax提交{id,p} 这2个参数,就可以了,页面返回json的url参数中原样带上p即可. 2.目的2: 步骤1:在如下页面 ...
- Django中ajax发送post请求，报403错误CSRF验证失败解决办法
今天学习Django框架,用ajax向后台发送post请求,直接报了403错误,说CSRF验证失败:先前用模板的话都是在里面加一个 {% csrf_token %} 就直接搞定了CSRF的问题了:很显 ...
- 使用Ajax发送http请求（get&post请求）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 同步和异步 同步和异步的概念 同步:必须等待前面的任务完成,才能继续后面 ...
随机推荐
- 一、mycat介绍
一.背景 随着时间和业务的发展,数据库中的数据量增长是不可控的,库和表中的数据会越来越大,随之带来的是更高的磁盘.IO.系统开销,甚至性能上的瓶颈,而一台服务的资源终究是有限的,因此需要对数据库和表进 ...
- spring的核心模块有哪些？
Spring的七个核心模块,供大家参考,具体内容如下 1.Spring core:核心容器 核心容器提供spring框架的基本功能.Spring以bean的方式组织和管理Java应用中的各个组件及其关 ...
- 学习GlusterFS（二）
环境准备 3台机器,每个机器双网卡,每个机器还需要额外添加1个10GB的磁盘用于测试 机器系统版本是centos6.6 1 2 3 4 5 [root@gluster-1-1 ~]# uname -r ...
- Netty之非阻塞处理
Netty 是一个异步的.基于事件驱动的网络应用框架,用以快速开发高性能.高可靠性的网络 IO 程序. 一.异步模型 同步I/O : 需要进程去真正的去操作I/O: 异步I/O:内核在I/O操作完成后 ...
- C++ | 再探智能指针（shared_ptr 与 weak_ptr）
上篇博客我们模拟实现了 auto_ptr 智能指针,可我们说 auto_ptr 是一种有缺陷的智能指针,并且在C++11中就已经被摈弃掉了.那么本章我们就来探索 boost库和C++11中的智能指针以 ...
- zTree -- jQuery 树插件 使用方法与例子
简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件". 网址:http://www.ztree.me/v3/main.php#_zTreeInfo 上面的网址里有z ...
- Git本地上传口令
$ cd /d/GitProject (进入要上传的文件的文件夹) $ git pull (更新本地库) $ git add . (添加 ...
- in a frame because it set 'X-Frame-Options' to 'sameorigin'
不是所有网站都给 iframe嵌套的, 有的网站设置了 禁止嵌套!!! 浏览器会依据X-Frame-Options的值来控制iframe框架的页面是否允许加载显示出来, 看你们公司这么设置了!! ...
- Python入门-程序结构扩展
deque双端队列 #双端队列,就是生产消费者模式,依赖collections模块 from collections import deque def main(): info = deque((&q ...
- Azure DevOps (九) 通过流水线推送镜像到Registry
上一篇文章我们研究了如何通过流水线编译出一个docker的镜像,本篇我们来研究一下,如何把编译好的镜像推送到镜像仓库去. 平时如果我们是单机部署,我们的docker本身就装在部署的机器上,我们在本机直 ...