在Django中调用Ajax Load函数时为何出现404错误？

我正在用Django搭建一个页面，该页面先渲染带有加载图片的空白页，随后调用Ajax GET请求至我的一个视图。Ajax请求成功后，本应加载一个HTML文件，但我收到404错误提示找不到模板，而该模板与其他文件在同一文件夹中，是不是我的文件路径有误？

相关代码：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>

{% extends "stocks_sites/base.html" %}

 <!-- The loading image -->
  {% block loader %}
  <div id="loading">
      <p>Loading</p>
  </div>

  <div id="articles">
  </div>

<script>
    // AJAX call when page has loaded
    $(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "{% url 'stocks_sites:get_news_articles' %}",

            success: function(response) {
              const news_articles = response;  
              const posts = news_articles.posts;
              const search = news_articles.search;

              document.getElementById("loading").style.display = "none";
              $("#articles").load("news_articles.html");             
              
            }
        });
    });
</script>
{% endblock loader %}

核心问题是：jQuery的load()是前端发起的HTTP请求，它访问的是服务器的URL路径，而非Django模板文件夹里的本地文件路径。Django的templates文件夹仅用于后端视图渲染，前端无法直接访问其中的文件，直接写news_articles.html会让前端请求当前页面URL下的该资源，而服务器没有对应的路由处理，因此返回404。

方法一：通过Django视图渲染模板（推荐） #

将news_articles.html作为Django模板，创建对应视图和路由，让前端请求该路由获取渲染后的HTML：

1. 添加路由：在stocks_sites/urls.py中新增路由：

from django.urls import path
from . import views

urlpatterns = [
    # 其他已存在的路由
    path('news-articles-template/', views.news_articles_template, name='news_articles_template'),
]

2. 创建视图：在stocks_sites/views.py中编写渲染模板的视图：

from django.shortcuts import render

def news_articles_template(request):
    # 若需传递AJAX获取的posts、search数据，可通过session或其他方式传递
    # 若前端已持有数据，可直接渲染空模板后续用JS填充
    return render(request, 'stocks_sites/news_articles.html')

3. 修改前端代码：将load()的路径替换为Django路由URL：

$("#articles").load("{% url 'stocks_sites:news_articles_template' %}");

方法二：将HTML作为静态文件访问 #

如果news_articles.html是纯静态HTML（无需Django模板语法），可将其放入static文件夹，通过静态文件URL访问：

1. 放置文件：将news_articles.html放到static/stocks_sites/目录下（无此目录则创建）。

2. 修改前端代码：使用Djangostatic模板标签生成正确的静态文件URL：

$("#articles").load("{% static 'stocks_sites/news_articles.html' %}");

3. 确认静态文件配置：检查settings.py中的静态文件配置是否正确：

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / "static",
]

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