### 如何通过 JavaScript 使用 Fetch API 从 Django 后端获取数据 要实现从前端使用 JavaScript 的 `fetch` 方法来调用 Django 提供的数据接口，可以按照以下方式构建解决方案： #### 前置条件 确保 Django 已经配置好 RESTful 接口。可以通过安装并设置 Django Rest Framework (DRF) 来快速创建 API 视图[^2]。 #### 创建 Django 数据模型与视图 假设已经有一个名为 `Article` 的模型定义如下： ```python from django.db import models class Article(models.Model): title = models.CharField(max_length=200) content = models.TextField() ``` 接着，在 Django 中创建一个简单的基于类的视图用于返回 JSON 数据： ```python from django.http import JsonResponse from .models import Article def get_articles(request): articles = list(Article.objects.values()) return JsonResponse(articles, safe=False) ``` 此函数会将数据库中的所有文章对象序列化为字典列表并通过 HTTP 响应返回给前端。 #### 配置 URL 路由 在项目的 `urls.py` 文件中添加路由映射到上述视图： ```python from django.urls import path from .views import get_articles urlpatterns = [ path('api/articles/', get_articles), ] ``` 这样就完成了后端部分的工作，现在可以从客户端访问 `/api/articles/` 地址获得所需的文章数据。 #### 客户端代码示例 以下是利用 JavaScript 的 `fetch` 函数请求这些资源的一个例子： ```javascript async function fetchArticles() { try { const response = await fetch('/api/articles/'); if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`); const jsonData = await response.json(); console.log(jsonData); // 输出接收到的文章数组 displayArticles(jsonData); } catch(error){ console.error("Failed to fetch articles:", error); } } function displayArticles(data){ let output = ''; data.forEach(article => { output += `<div><h3>${article.title}</h3><p>${article.content.substring(0, 100)}...</p></div>`; }); document.getElementById('articles').innerHTML = output; } ``` 以上脚本首先尝试连接至服务器上的指定路径以检索所有的文章记录；成功之后再解析所得JSON字符串并将结果显示于页面上特定区域之中。 #### CORS 处理注意事项 如果前后端分离部署，则需考虑跨域资源共享(CORS)问题。可以在 Django 设置里加入中间件支持CORS头信息传递: ```python INSTALLED_APPS = [ ... 'corsheaders', ] MIDDLEWARE = [ ... 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', ] CORS_ORIGIN_ALLOW_ALL = True # 开发环境可设为True，生产环境中建议限定具体域名白名单 ```