当前位置：首页 > news >正文

day38-Django（4）

news 2025/6/22 6:40:20

day38 Django 3.2

七、Ajax请求

客户端（浏览器）向服务端发起请求的形式：

地址栏：GET
超链接标签：GET
form表单：GET或POST
Ajax（重要）：GET或POST或PUT或DELETE

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

AJAX的特点和优点：

异步
局部刷新

应用：

在这里插入图片描述

7.2、json数据

Supports the following objects and types by default:+-------------------+---------------+| Python            | JSON          |+===================+===============+| dict              | object        |+-------------------+---------------+| list, tuple       | array         |+-------------------+---------------+| str               | string        |+-------------------+---------------+| int, float        | number        |+-------------------+---------------+| True              | true          |+-------------------+---------------+| False             | false         |+-------------------+---------------+| None              | null          |+-------------------+---------------+

（1）python的序列化和反序列化方法

import jsondic = {"name": "yuan"}
dic_json = json.dumps(dic)
dic = json.dumps(dic_json)

（2）Django支持的序列化方法

关于Django中的序列化主要应用在将数据库中检索的数据返回给客户端用户，特别的Ajax请求一般返回的为Json格式。

# 序列化响应类
from django.http import JsonResponse
JsonResponse({})
# 序列化queryset
from django.core import serializers
ret = models.Book.objects.all()
data = serializers.serialize("json", ret)

7.3、Ajax请求案例

在这里插入图片描述

(1) 视图

# Create your views here.
def reg(request):return render(request, "reg.html")def reg_user(request):data = {"msg": "", "state": "success"}user = request.POST.get("user")if user == "yuan":data["state"] = "error"data["msg"] = "该用户已存在！"return JsonResponse(data)

(2) 模板：reg.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><p>用户名：<input type="text"><span class="error" style="color: red"></span></p><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>$(":text").blur(function () {// 发送Ajax请求$.ajax({url: "http://127.0.0.1:8008/reg_user/",type: "post",data: {user: $(":text").val(),},success: function (response) {console.log(response);$(".error").html(response.msg);}})})</script></body>
</html>

(3) 流程图

练习：

计算器
ajxa通过orm获取书籍并展示

7.4、同源策略

7.4.1、同源策略和跨域

现在我们将reg.html单独放在客户端，用浏览器打开，再触发事件，会发现报错：

在这里插入图片描述

这是因为浏览器的同源策略导致的。

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

那么如何解决这种跨域问题呢，我们主要由三个思路：

jsonp
cors
前端代理

这里主要给大家介绍第二个：cors

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

所以，服务器方面只要添加一个响应头，同意跨域请求，浏览器也就不再拦截：

response = JsonResponse(data)
response["Access-Control-Allow-Origin"] = "*"

在这里插入图片描述

7.4.2、cors

cors有两种请求：简单请求和非简单请求

只要同时满足以下两大条件,就属于简单的请求

（1) 请求方法是以下三种方法之一：
HEAD
GET
POST
（2）HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

凡是不同时满足上面两个条件，就属于非简单请求。浏览器对这两种请求的处理，是不一样的。

简单请求:一次请求

非简单请求:两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。

- 请求方式：OPTIONS
- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
- 如何“预检”=> 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过Access-Control-Request-Method=> 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过Access-Control-Request-Headers

支持跨域,简单请求:

服务器设置响应头：Access-Control-Allow-Origin = '域名' 或 '*'

支持跨域复杂请求:

由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。
“预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
“预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers

cors在Django中的实现：

在返回结果中加入允许信息(简单请求):

def test(request):import jsonobj=HttpResponse(json.dumps({'name':'yuan'}))# obj['Access-Control-Allow-Origin']='*'obj['Access-Control-Allow-Origin']='http://127.0.0.1:8004'return obj

放到中间件中处理复杂和简单请求:

from django.utils.deprecation import MiddlewareMixin
class MyCorsMiddle(MiddlewareMixin):def process_response(self, request, response):# 简单请求:# 允许http://127.0.0.1:8001域向我发请求# ret['Access-Control-Allow-Origin']='http://127.0.0.1:8001'# 允许所有人向我发请求response['Access-Control-Allow-Origin'] = '*'if request.method == 'OPTIONS':# 所有的头信息都允许response['Access-Control-Allow-Headers'] = '*'return response

在settings中配置即可,在中间件中的位置可以随意放置.

也可以通过第三方组件：pip install django-cors-headers

# (1)
pip install django-cors-headers# (2)INSTALLED_APPS = ('corsheaders',
)# (3)1 MIDDLEWARE = [2     'django.middleware.security.SecurityMiddleware',3     'django.contrib.sessions.middleware.SessionMiddleware',4     'django.middleware.csrf.CsrfViewMiddleware',5