在Django项目中如何通过Ajax实现Python变量变更时动态更新HTML文本？

我的项目基于Ajax、Python、Django、HTML和JavaScript技术栈，现在遇到了服务器端数据无法动态同步到客户端网页的问题：

HTML代码 #

<p class='text_box' id='tbox'>
    {{ text_variable_from_python }}
</p>
<input class='input_box' id='ibox' type='text'> 

后端views.py的main视图代码 #

def main(request):
    if request.method == 'POST':
        new_text = request.POST['text']
        context = {'text_variable_from_python': new_text}
    else:
        context = {'text_variable_from_python': 'You can change me!'}
    print(context)
    return render(request, 'Main.html', context=context)

当前只能显示初始文本"You can change me!"，输入框提交内容后，页面无法更新显示新内容。

补充的Ajax代码 #

发送输入内容的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  function getInputValue() {
    let inputVal = document.getElementById("ibox").value;
    document.getElementById("ibox").value = '';

    $.ajax({
        type:'POST',
        url: 'main',
        data: {csrfmiddlewaretoken: "{{ csrf_token }}",
               'text': inputVal,}
    });
  }
</script>

尝试更新页面的代码：

<script>
    function update_dialogue() {
        $.ajax({
            type: "json",
            url: "update_text",
            success: function(data) {
                document.getElementById("tbox").value = data['text_variable_from_python'];
            }
        });
    }
</script>

你的问题核心在于Ajax请求逻辑错误、视图返回内容不符合Ajax需求，以下是分步修复方案：

1. 修复后端视图，支持JSON返回 #

当前main视图在POST请求时返回完整HTML页面，但Ajax需要纯JSON数据；另外你定义了update_text的URL，但没有对应视图。调整后的视图代码：

from django.http import JsonResponse

# 全局变量临时存储文本（生产环境建议用数据库替代）
current_text = 'You can change me!'

def main(request):
    global current_text
    if request.method == 'POST':
        new_text = request.POST.get('text', '')
        current_text = new_text
        # 给Ajax返回JSON格式的最新文本
        return JsonResponse({'text_variable_from_python': current_text})
    else:
        # GET请求返回页面，携带初始文本
        return render(request, 'Main.html', context={'text_variable_from_python': current_text})

# 新增获取最新文本的接口
def update_text(request):
    global current_text
    return JsonResponse({'text_variable_from_python': current_text})

2. 修复前端Ajax代码错误 #

核心错误点： #

• update_dialogue中type参数填错，应该是请求方法（如GET），json是dataType参数；
• <p>标签没有value属性，要用textContent修改内容；
• 提交请求后未触发页面更新，需在成功回调里直接更新或调用同步方法。

修改后的前端代码：

<p class='text_box' id='tbox'>
    {{ text_variable_from_python }}
</p>
<input class='input_box' id='ibox' type='text'>
<button onclick="getInputValue()">提交</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  function getInputValue() {
    let inputVal = document.getElementById("ibox").value.trim();
    if (!inputVal) return; // 空内容不提交
    document.getElementById("ibox").value = '';

    $.ajax({
        type:'POST',
        url: '{% url "main" %}', // 用Django反向解析URL，避免硬编码
        data: {
            csrfmiddlewaretoken: "{{ csrf_token }}",
            'text': inputVal
        },
        success: function(data) {
            // 提交成功直接更新页面，无需额外请求
            document.getElementById("tbox").textContent = data.text_variable_from_python;
        },
        error: function() {
            alert('提交失败');
        }
    });
  }

  // 如需定时主动同步数据，可开启下面的定时器
  // setInterval(update_dialogue, 1000); // 每秒同步一次
  function update_dialogue() {
    $.ajax({
        type: "GET",
        url: '{% url "update_text" %}',
        dataType: "json",
        success: function(data) {
            document.getElementById("tbox").textContent = data.text_variable_from_python;
        }
    });
  }
</script>

3. 配置URL路由 #

在项目的urls.py中添加对应路由：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.main, name='main'),
    path('update_text/', views.update_text, name='update_text'),
]

关键修复总结 #

• 后端区分请求类型：POST返回JSON，GET返回页面；新增update_text接口用于主动拉取数据；
• 前端修改<p>内容用textContent而非value；
• 提交请求的成功回调直接更新页面，减少冗余请求；
• 使用Django的URL反向解析{% url %}，避免硬编码路径。

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