Django 前后台数据传递的三种核心方法

Mia

发布时间：2026-10-13 | 4人浏览过

原创

本文详解 Django 中三种前后台数据传递方式：通过 render 函数将数据直接渲染至 HTML 模板；利用 json.dumps 配合 safe 过滤器将数据传递给 JavaScript；以及通过 Ajax 实现页面不刷新动态加载数据。涵盖具体代码实现与注意事项，帮助开发者掌握 Django 数据交互核心技巧。

在 Django 框架中，后端向前端传递数据存在多种实现路径。

最基础的后端视图代码如下：

from django.shortcuts import render

def main_page(request):
  return render(request, 'index.html')

上述代码仅返回 index.html 页面内容，若需同时传递数据至前台，应如何处理？

一、View 到 HTML：使用 Django 模板引擎

此场景下，后端将数据传递给 HTML 页面进行直接渲染，不涉及复杂的前台数据处理（若需前台处理数据，则应传递至 JS 进行逻辑运算）。

对应的 Django 后端代码如下：

from django.shortcuts import render

def main_page(request):
  data = [1,2,3,4]
  return render(request, 'index.html', {'data': data})

在 HTML 中，通过 {{ }} 语法获取后端传递的数据。

<div>{{ data }}</div>

对于可迭代的数据结构，可进行遍历操作：

{% for item in data%}
<p>{{ item }}</p>
{% endfor %}

该方式支持传递 list、dict 等多种数据类型。

除 {% for %} 循环外，模板还支持 if 判断、大小比较等逻辑操作，具体用法建议查阅官方文档。

二、View 到 JavaScript

若数据无需在 HTML 中展示，而是直接供 JavaScript 使用，沿用上述模板方式会导致错误。

需注意以下两点关键事项：

1. views.py 中返回的值需使用 json.dumps() 进行序列化。

2. 在 HTML 模板中需添加 safe 过滤器以禁用自动转义。

具体实现代码如下：

views.py 部分：

# -*- coding: utf-8 -*-
 
import json
from django.shortcuts import render
 
def main_page(request):
  list = ['view', 'Json', 'JS']
  return render(request, 'index.html', {
      'List': json.dumps(list),
    })

JavaScript 部分：

var List = {{ List|safe }};

三、JavaScript Ajax 动态刷新页面

该方案指前台通过 Ajax 发送请求，后端处理数据后返回结果，前台在不刷新页面的前提下动态加载数据。

Django 后端代码如下：

def scene_update_view(request):
  if request.method == "POST":
      name = request.POST.get('name')
      status = 0
      result = "Error!"
      return HttpResponse(json.dumps({
        "status": status,
        "result": result
      }))

前端 JS 代码如下：

    function getSceneId(scece_name, td) {
      var post_data = {
        "name": scece_name,
      };

      $.ajax({
        url: {% url 'scene_update_url' %},
        type: "POST",
        data: post_data,
        success: function (data) {
          data = JSON.parse(data);
          if (data["status"] == 1) {
            setSceneTd(data["result"], scece_name, td);
          } else {
            alert(data["result"]);
          }
        }
      });
    }

JS 发送 Ajax 请求，后端处理请求并返回 status 和 result 字段。

在 success 回调函数中处理返回数据时，需使用 JSON.parse(data) 进行解析。

以上为 Django 前后台数据传递的主要内容，希望能为读者提供有益参考。