Django按钮触发GET请求后无法重新渲染页面问题求助

问题描述 #

我有一个包含表单和若干按钮的Django视图及HTML模板。点击其中一个按钮时，会发送带有查询参数的GET请求，期望根据该参数重新渲染页面并传入不同数据库数据，但无法实现页面重新渲染。尝试过去掉return、使用JsonResponse均无效。

视图核心代码 #

def card(request):
    cur_rk = 0
   
    if request.method == 'GET':
        if request.GET.get('C', '') == '-1':
            q1 = "SELECT MAX(RK) AS L_RK FROM B_DATA;"
            with connection.cursor() as cursor:
                cursor.execute(q1)
                val = cursor.fetchall()
                cur_rk = val[0][0]
                
            return render(request, "card.html", get_db_data(cur_rk))
            
            
    return render(request, "card.html", get_db_data(cur_rk))

相关HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create new card</title>
</head>
<body>
    <div class = "enter_data">
        <form action = "" method="POST">{% csrf_token %}
            <div class = "base">
                <h2>Базови данни</h2>
                <input type="number" class="field" placeholder="Enter RK" value = {{RK}} name="RK">
                <input type="text" class="field" placeholder="Enter RN" value = {{RN}} name="RN">
                <input type="text" class="field" placeholder="Enter Marka" value = {{Marka}} name="Marka">
                <input type="text" class="field" placeholder="Enter Model" value = {{Model}} name="Model">
                <input type="number" class="field" placeholder="Enter G_PR" value = {{G_PR}} name="G_PR">
                <input type="number" class="field" placeholder="Enter KM" value = {{KM}} name="KM">
                <input type="text" class="field" placeholder="Enter Kupe" value = {{Kupe}} name="Kupe">
                <input type="text" class="field" placeholder="Enter Rama" value = {{Rama}} name="Rama">
                <input type="text" class="field" placeholder="Enter Dvigatel" value = {{Dvigatel}} name="Dvigatel">
                <textarea class="field" placeholder="Enter Descr" name="Descr">{{Descr}}</textarea>
                <textarea class="field" placeholder="Enter Problem" name="Problem">{{Problem}}</textarea>
                <input type="date" class="field" placeholder="Enter R_DATA" value = {{R_DATA}} name="R_DATA">
            </div>
            <div class = "client">
                <h2>Данни за клиента</h2>
                <input type="text" class="field" placeholder="Enter ime" value = {{ime}} name="ime">
                <input type="text" class="field" placeholder="Enter telefon" value = {{telefon}} name="telefon">
            </div>
            <button type = "submit" class = "btn">Add card</button>
        </form>
    </div>
    <div class = "control_btns">
        <button id="first" onclick="getData(0)">&lt;&lt;</button>
        <button id="previous" onclick="getData({{RK}}-1)">&lt;</button>
        <button id="next" onclick="getData({{RK}}+1)">&gt;</button>
        <button id="last" onclick="getData(-1)">&gt;&gt;</button>
    </div>
    <script>
        function getData(card) {
            let url = 'http://127.0.0.1:8000/card/?C=' + card.toString();
            fetch(url);
        }
        function greet() {
            console.log('Hey there clicker!');
        }
    </script> 
</body>
</html>

问题原因 #

1. 前端逻辑错误：使用fetch(url)仅发送了GET请求，但没有处理返回的HTML响应，浏览器不会自动替换当前页面内容。
2. 视图逻辑不完整：仅处理了C=-1的情况，其他数值类型的C参数（比如0、RK±1）未被处理，导致这些请求返回的仍是初始cur_rk=0对应的数据。

解决方案 #

1. 修复Django视图逻辑 #

完善视图，处理所有合法的C参数：

def card(request):
    cur_rk = 0
   
    if request.method == 'GET':
        c_param = request.GET.get('C', '')
        if c_param == '-1':
            # 获取数据库中最大的RK值
            q1 = "SELECT MAX(RK) AS L_RK FROM B_DATA;"
            with connection.cursor() as cursor:
                cursor.execute(q1)
                val = cursor.fetchall()
                # 处理查询结果为空的情况，避免报错
                cur_rk = val[0][0] if val and val[0][0] is not None else 0
        elif c_param.lstrip('-').isdigit():
            # 处理数字类型的C参数（包括正数和负数）
            cur_rk = int(c_param)
            
    # 可选：添加RK有效性校验，比如确保不小于数据库中的最小RK
    # q2 = "SELECT MIN(RK) AS MIN_RK FROM B_DATA;"
    # with connection.cursor() as cursor:
    #     cursor.execute(q2)
    #     min_rk = cursor.fetchall()[0][0] if val else 0
    # cur_rk = max(cur_rk, min_rk)
    
    return render(request, "card.html", get_db_data(cur_rk))

2. 修复前端JavaScript逻辑 #

将fetch替换为页面跳转，让浏览器重新加载并渲染页面：

function getData(card) {
    // 直接跳转到目标URL，触发页面重新渲染
    window.location.href = '/card/?C=' + card.toString();
}

另外，为避免模板渲染出错，建议给按钮中的RK添加默认值：

<button id="previous" onclick="getData({{ RK|default:0 }} - 1)">&lt;</button>
<button id="next" onclick="getData({{ RK|default:0 }} + 1)">&gt;</button>

效果验证 #

修改完成后，点击控制按钮会触发页面跳转，视图根据C参数获取对应数据库数据，重新渲染页面后，表单字段会自动更新为新数据。

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