function getCookie(name) {
let cookieValue = null;
if (document.cookie && document.cookie !== '') {
const cookies = document.cookie.split(';');
for (let i = 0; i < cookies.length; i++) {
const cookie = cookies[i].trim();
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
return cookieValue;
const csrftoken = getCookie('csrftoken');
fetch('/my-endpoint/', {
method: 'POST',
headers: {
'X-CSRFToken': csrftoken,
'Content-Type': 'application/json'
body: JSON.stringify({key: 'value'})
.then(response => response.json())
.then(data => {
console.log(data);
四、处理异步请求
在现代Web应用中，异步请求（AJAX）是非常常见的。Django可以很好地与前端框架（如React、Vue.js）集成来处理异步请求。
1. 使用Fetch API
Fetch API是现代浏览器中用于处理异步请求的原生方法：
fetch('/my-endpoint/')
.then(response => response.json())
.then(data => {
console.log(data);
2. 使用Axios
Axios是一个流行的HTTP客户端库，可以用于处理异步请求：
import axios from 'axios';
axios.get('/my-endpoint/')
.then(response => {
console.log(response.data);
五、示例项目：使用Django和React构建简单的API交互
接下来，我们将通过一个实际的示例来说明如何使用Django和React来处理JS请求。
1. Django部分
1.1. 创建Django项目和应用
django-admin startproject myproject
cd myproject
django-admin startapp myapp
1.2. 配置Django项目
在settings.py中添加myapp和rest_framework到已安装的应用中：
INSTALLED_APPS = [
'myapp',
'rest_framework',
1.3. 定义模型
在myapp/models.py中定义一个简单的模型：
from django.db import models
class Item(models.Model):
name = models.CharField(max_length=100)
description = models.TextField()
1.4. 创建序列化器
在myapp/serializers.py中创建一个序列化器：
from rest_framework import serializers
from .models import Item
class ItemSerializer(serializers.ModelSerializer):
class Meta:
model = Item
fields = '__all__'
1.5. 创建视图集
在myapp/views.py中创建一个视图集：
from rest_framework import viewsets
from .models import Item
from .serializers import ItemSerializer
class ItemViewSet(viewsets.ModelViewSet):
queryset = Item.objects.all()
serializer_class = ItemSerializer
1.6. 配置URL
在myapp/urls.py中配置视图集的URL：
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import ItemViewSet
router = DefaultRouter()
router.register(r'items', ItemViewSet)
urlpatterns = [
path('', include(router.urls)),
2. React部分
2.1. 创建React项目
npx create-react-app myfrontend
cd myfrontend
2.2. 安装Axios
npm install axios
2.3. 创建组件
在src目录下创建一个名为ItemList.js的组件：
import React, { useEffect, useState } from 'react';
import axios from 'axios';
const ItemList = () => {
const [items, setItems] = useState([]);
useEffect(() => {
axios.get('/items/')
.then(response => {
setItems(response.data);
}, []);
return (
<h1>Item List</h1>
{items.map(item => (
<li key={item.id}>{item.name}: {item.description}</li>
export default ItemList;
2.4. 使用组件
在src/App.js中使用ItemList组件：
import React from 'react';
import ItemList from './ItemList';
function App() {
return (
<div className="App">
<ItemList />
export default App;
3. 运行项目
确保Django服务器和React开发服务器都在运行：
# 运行Django服务器
python manage.py runserver
运行React开发服务器
npm start
通过以上步骤，我们已经成功地使用Django处理JS请求，并通过React前端展示数据。这种方法可以帮助你构建现代Web应用，提供良好的用户体验。
在实际项目中，你可能会使用更复杂的场景和技术，如用户身份验证、权限管理、分页、过滤等。为了更好地管理项目，你可以使用研发项目管理系统PingCode和通用项目协作软件Worktile来提高团队协作效率。
总之，Django提供了强大的工具和灵活的方式来处理前端JS请求。通过合理使用视图函数、Django Rest Framework和异步请求技术，你可以构建高效、安全、可维护的Web应用。
相关问答FAQs：
1. Django如何处理JavaScript请求？
Django可以处理JavaScript请求通过使用视图函数和URL配置。首先，您需要在urls.py文件中定义一个URL模式，将其映射到您的视图函数。然后，在视图函数中，您可以使用Django提供的HttpRequest对象来访问JavaScript请求的数据和参数。您可以通过request.GET或request.POST来获取GET或POST请求中的数据。然后，您可以根据请求的内容执行适当的操作，并返回适当的响应给JavaScript。
2. 如何在Django中处理异步JavaScript请求？
在Django中处理异步JavaScript请求可以使用Django的内置Ajax支持或使用第三方库（例如Django Rest Framework）。首先，您需要在视图函数中定义一个装饰器来指示该函数可以处理异步请求。然后，您可以使用Django提供的HttpResponse对象来返回适当的响应。您还可以使用JsonResponse对象来返回JSON格式的响应，以便JavaScript可以轻松解析并处理。
3. Django如何处理通过JavaScript发送的表单数据？
要处理通过JavaScript发送的表单数据，您需要在Django中定义一个视图函数，该函数可以接收POST请求。首先，您需要在urls.py文件中配置一个URL模式，将其映射到该视图函数。然后，您可以在视图函数中使用Django提供的HttpRequest对象来获取表单数据。您可以使用request.POST来获取POST请求中的数据，并根据需要执行适当的操作。最后，您可以使用HttpResponse对象来返回适当的响应给JavaScript。
原创文章，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/2324698
赞 (0)
