javascript - 如何在 JS xhttp.open() 中正确提供文件路径？

Question

我正在尝试更改页面上的数据，而无需刷新。使用 Python/Django/JS

在此之后：https ://www.freecodecamp.org/news/ajax-tutorial/

按下按钮更改页面上的文本时，我收到以下错误。：

未找到：/Budgeting/content.txt HTTP/1.1 404

在上面的文章中它说：

文件 content.txt 应该存在于 Web 应用程序的根目录中。

我尝试将其直接放在根目录中，但问题仍然存在，因此我尝试将“content.txt”放入 Web 应用程序的每个目录中。它仍然无法找到该文件。

到处都有 content.txt 的目录结构：

带有 JS 的 hmtl 文件：

{% extends "base.html" %}
{% block page_content %}
{% load static %}
   
    <div id="foo">
    <h2>The XMLHttpRequest Object</h2>
    <button type="button" onclick="changeContent()">Change Content</button>
    </div>

    <script>
    function changeContent() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
        document.getElementById("foo").innerHTML =
        this.responseText;
        }
    };
    xhttp.open("GET", "static/content.txt", true);
    xhttp.send();
    }
    </script>
    
{% endblock page_content %}

也试过：

{% extends "base.html" %}
{% block page_content %}
   
    <div id="foo">
    <h2>The XMLHttpRequest Object</h2>
    <button type="button" onclick="changeContent()">Change Content</button>
    </div>

    <script>
    function changeContent() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
        document.getElementById("foo").innerHTML =
        this.responseText;
        }
    };
    xhttp.open("GET", "content.txt", true);
    xhttp.send();
    }
    </script>
    
{% endblock page_content %}