Django环境下JavaScript无法读取本地JSON文件的问题求助

问题根源 #

你使用相对路径../../scrapers/jsonOutputs/linkedin_jobs.json发起请求时，浏览器会自动将其拼接在当前页面URL后，但Django开发服务器默认不会处理scrapers这类非静态目录、非路由映射的文件访问，因此返回404错误。

方案一：将JSON文件移至静态目录（推荐） #

1. 调整文件位置 #

把linkedin_jobs.json移动到Django项目的静态文件目录下，比如新建static/json/文件夹后放入该文件。

2. 修改HTML与JS代码 #

在HTML中通过Django的static标签生成JSON文件的正确访问URL，再传递给JavaScript：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script>
        // 提前定义JSON文件的静态资源URL
        const jobJsonUrl = "{% static 'json/linkedin_jobs.json' %}";
    </script>
</head>
<body>
    <h2 id="job-list-heading">Job Listings</h2>
     <div id="job-list-container">
    </div>
    <script src={% static 'js/jobsearch-func.js' %}></script>
</body>
</html>

修改JavaScript中的Fetch逻辑，同时增加错误处理：

fetch(jobJsonUrl)
.then(response => {
  // 先校验响应状态
  if (!response.ok) {
    throw new Error(`请求失败：状态码 ${response.status}`);
  }
  return response.json();
})
.then(data => {
  const jobListings = data.Jobs;
  jobListings.forEach(job => {
    const jobTitle = job["Job Title:"];
    const employerName = job["Employer name: "];
    const jobLocation = job["Job Location: "];
    const jobDetails = job["Job Details: "];
    const linkToJob = job["Link To Job: "];
    const jobListingElement = document.createElement("div");
    jobListingElement.classList.add("job-listing");
    jobListingElement.innerHTML = `
      <h2>${jobTitle}</h2>
      <p>${employerName}</p>
      <p>${jobLocation}</p>
      <div class="job-description-container">
        <div class="job-description">
          <p>${jobDetails}</p>
          <a href="${linkToJob}" target="_blank">View Job</a>
        </div>
      </div>
    `;
    const jobListContainer = document.getElementById("job-list-container");
    jobListContainer.appendChild(jobListingElement);
  });
})
.catch(error => {
  console.error('加载JSON数据失败:', error);
});

方案二：通过Django视图返回JSON内容 #

若不想移动JSON文件，可编写视图读取文件并返回数据：

1. 添加视图函数（app的views.py） #

from django.http import JsonResponse
import json
import os
from django.conf import settings

def get_job_json(request):
    # 拼接JSON文件的绝对路径
    json_path = os.path.join(settings.BASE_DIR, 'scrapers', 'jsonOutputs', 'linkedin_jobs.json')
    with open(json_path, 'r', encoding='utf-8') as f:
        data = json.load(f)
    return JsonResponse(data)

2. 配置路由（项目或app的urls.py） #

from django.urls import path
from .views import get_job_json

urlpatterns = [
    # 其他路由...
    path('jobs/json/', get_job_json, name='job_json'),
]

3. 修改JS的Fetch路径 #

直接请求该路由地址：

fetch('/jobs/json/')
// 后续处理逻辑同方案一的JS代码

额外提示 #

• 确保JSON文件编码为UTF-8，避免解析时出现乱码或语法错误。
• 增加catch块可捕获请求失败、JSON解析错误等异常，避免控制台出现未处理的Promise拒绝提示。

内容的提问来源于stack exchange，提问作者Ali Alvi