在Web开发中，html5文件负责页面展示与用户交互，后端Python借助Django框架处理业务逻辑。两者通过HTTP请求与响应完成数据交换，核心在于Django的路由、视图以及html5中的请求发送方式。
一、Django接收html5请求的基本流程
当用户在html5页面进行操作（如提交表单），浏览器会向服务器发送HTTP请求。Django根据配置的URL路由，将请求交给对应的视图函数处理，视图从request中取数据，处理后返回html5或JSON响应。
1. 配置URL路由
在Django应用的urls.py中，把路径映射到视图函数：
# myapp/urls.py
from django.urls import path
from . import views
urlpatterns = [
path('submit/', views.submit_view, name='submit'),
]
2. 编写视图函数
视图函数接收request对象，从中获取html5传来的数据：
# myapp/views.py
from django.http import HttpResponse
from django.shortcuts import render
def submit_view(request):
if request.method == 'POST':
# 从表单中取数据
username = request.POST.get('username')
return HttpResponse('收到:' + username)
return render(request, 'form.html')
二、html5文件如何发送请求
1. 使用form表单
最简单的交互是用html5的form标签，action指向Django路由：
<!DOCTYPE html>
<html>
<body>
<form method="post" action="/submit/">
{% raw %}{% csrf_token %}{% endraw %}
<input type="text" name="username">
<button type="submit">提交</button>
</form>
</body>
</html>
注意在Django模板中，form内部需包含csrf_token标签以防止跨站请求伪造。
2. 使用fetch异步交互
现代html5常用fetch发送JSON数据：
fetch('/submit/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': 'token值'
},
body: JSON.stringify({username: '张三'})
})
.then(res => res.text())
.then(data => console.log(data));
三、视图返回不同响应类型
Django视图可返回渲染后的html5页面，也可返回JSON供前端JS处理。
| 响应方式 | 适用场景 |
|---|---|
| render() | 返回完整html5页面 |
| JsonResponse() | 前后端分离接口 |
使用JsonResponse示例
from django.http import JsonResponse
def api_view(request):
name = request.GET.get('name')
return JsonResponse({'msg': 'hello', 'name': name})
四、小结
html5与Django后端交互的本质是HTTP通信。前端通过form或fetch发请求，Django用路由定位视图，视图借助request解析数据并返回响应。掌握这一链路，就能实现基础的前后端联动。
html5DjangoPython_view修改时间：2026-07-28 00:00:10