Django返回JsonResponse时无法渲染网页？实时交互问题修复

我尝试在Django中开发一个可获取用户实时输入并返回响应的网页，但当views.py中的函数返回JsonResponse类型时，模板中的HTML文件无法正常显示。请问该如何解决此问题？

我的代码 #

HTML模板 #

<!DOCTYPE html>
<html>
<head>
  <title>Real-time Input Text</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <input type="text" id="input-box">
  <div id="output"></div>

  <script>
    $(document).ready(function() {
      $("#input-box").on("input", function() {
        var inputText = $(this).val(); // 获取输入框当前值

        $.ajax({
          url: "/update_text/",
          method: "POST",
          data: {
            text: inputText
          },
          success: function(response) {
            $("#output").text(response);
          }
        });
      });
    });
  </script>
</body>
</html>

views.py函数 #

from django.shortcuts import render
from django.http import JsonResponse

def update_text(request):
    if request.method == "POST":
        text = request.POST.get("text", "")

        return JsonResponse(text, safe=False)
    else:
        return JsonResponse({}, status=400) 

1. 分离页面渲染与AJAX接口 #

确保项目中有两个独立的视图和路由：一个负责返回HTML页面，另一个专门处理AJAX请求。

• urls.py配置：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),  # 返回HTML页面的路由
    path('update_text/', views.update_text, name='update_text'),  # 处理AJAX的路由
]

• 新增页面渲染视图：
  在views.py中添加返回HTML模板的函数：

def index(request):
    return render(request, '你的模板文件名.html')  # 替换为实际模板文件名

2. 解决CSRF验证问题 #

Django默认启用CSRF保护，未携带令牌的POST请求会被拦截，这是页面异常的常见原因。

• 在HTML中加入CSRF令牌：
  在<head>标签内添加：

{% csrf_token %}

• 修改AJAX请求携带令牌：
  更新JavaScript代码，在请求头中加入CSRF令牌：

$(document).ready(function() {
    // 获取页面中的CSRF令牌
    var csrftoken = $("[name=csrfmiddlewaretoken]").val();

    $("#input-box").on("input", function() {
        var inputText = $(this).val();

        $.ajax({
            url: "/update_text/",
            method: "POST",
            headers: { "X-CSRFToken": csrftoken },  // 携带CSRF令牌
            data: {
                text: inputText
            },
            success: function(response) {
                $("#output").text(response.text);  // 对应后端返回的JSON字段
            },
            error: function(xhr) {
                console.log("请求错误：" + xhr.responseText);  // 调试用错误日志
            }
        });
    });
});

3. 规范JsonResponse返回格式 #

建议返回标准JSON对象而非纯文本，避免前端解析异常：

修改views.py的update_text函数：

def update_text(request):
    if request.method == "POST":
        text = request.POST.get("text", "")
        return JsonResponse({"text": text})  # 返回包含文本的JSON对象
    else:
        return JsonResponse({"error": "无效的请求方式"}, status=400)

4. 调试排查 #

若问题仍存在，通过以下方式定位：

• 打开浏览器开发者工具（F12），查看Network标签下AJAX请求的状态码和响应内容
• 检查Console标签是否有JavaScript报错
• 查看Django终端日志，确认后端是否有异常抛出

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