Python3.6.4+Django2.0环境下JS读取JSON文件路径问题求助

Hey there, let's work through this path problem together—Django's static file handling has specific rules that are easy to miss, but once you get them sorted, this will be a breeze.

First, Confirm Your Static File Setup #

Django doesn't let you reference files arbitrarily; it uses a structured static file system. Here's what you need to check first:

1. Verify your settings.py configuration
   Make sure these lines are present and correct (adjust paths if your setup differs):

   # settings.py
   import os
   BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
   
   STATIC_URL = '/static/'
   # Add this if your static files live in the project root (not inside an app)
   STATICFILES_DIRS = [
       os.path.join(BASE_DIR, 'static'),
   ]
   

2. Organize your static files correctly
   Your data.json must live inside a static directory—either in your project root or one of your Django apps. Example structures:

   • Project root: your_project/static/bar/data/data.json
   • App-specific: your_app/static/bar/data/data.json

The Correct Path to Use in script.js #

The mistake here is almost certainly using a relative path instead of Django's static file URL. Relative paths break because they're based on the page's URL, not where the static file actually resides.

Option 1: Inject Django's Static URL into Your JS (Recommended)

This is the most robust approach, as it works across all deployment setups:

1. In your index.html template (must be a Django template, not plain HTML), add this before loading script.js:

   <!-- index.html -->
   <script>
       // Pass Django's static URL to your JavaScript
       const staticUrl = "{{ STATIC_URL }}";
   </script>
   <script src="{% static 'path/to/your/script.js' %}"></script>
   

2. In script.js, build the full path using the injected staticUrl:

   // script.js
   const xhr = new XMLHttpRequest();
   const jsonPath = staticUrl + 'bar/data/data.json';
   xhr.open('GET', jsonPath, true);
   xhr.onload = function() {
       if (this.status >= 200 && this.status < 400) {
           const data = JSON.parse(this.responseText);
           // Process your data here
       }
   };
   xhr.send();
   

Option 2: Hardcode the Full Static Path (Quick Test Only)

For a quick test, you can use the full static URL directly (avoid this for production—changing STATIC_URL later will break all hardcoded paths):

const jsonPath = '/static/bar/data/data.json';

Debugging Tips if It's Still Not Working #

1. Open your browser's Developer Tools (F12 or Ctrl+Shift+I)
2. Navigate to the Network tab
3. Reload the page and look for the XHR request to data.json:
   • A 404 error means the browser is looking in the wrong place—check the request URL to adjust your path.
   • A 200 status means the path is correct—your issue is likely in how you're processing the JSON data.

内容的提问来源于stack exchange，提问作者christianbueno.1