Django中点击按钮获取输入值 如何实现类似JS addEventListener功能

• 你当前使用的type="button"为普通按钮，默认不会触发表单提交，点击后后端接收不到任何POST请求，所以判断逻辑永远不会触发
• Django是后端服务框架，本身不具备前端事件监听能力，所有前端交互动作需要先通过JS触发请求发送到后端，才能触发Django的逻辑处理

方案1：传统表单提交（页面会刷新） #

前端修改 #

把按钮包裹在form标签内，修改按钮类型为submit，补充Django必填的csrf token：

<form method="POST" action="你的后端路由地址">
    {% csrf_token %}
    <!-- 其他输入控件放在此处 -->
    <button type="submit" class="bbtn" name="fah" id="fah" value="fah">Convert</button>
</form>

后端代码修正 #

改用get方法获取POST参数，避免参数不存在时抛出KeyError异常：

if request.method == 'POST':
    if request.POST.get('fah'):
        # 此处写入你的业务处理逻辑

方案2：异步提交（页面无刷新，匹配你要的点击监听效果） #

前端修改 #

保留原按钮，新增JS点击监听逻辑，发送异步请求到后端：

<!-- csrf token隐藏字段，Django POST请求必填 -->
<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
<button type="button" class="bbtn" name="fah" id="fah" value="fah">Convert</button>

<script>
// 给按钮绑定点击事件，等效于你提到的addEventListener效果
document.querySelector('#fah').addEventListener('click', function() {
    const postData = new FormData();
    postData.append('fah', this.value);
    postData.append('csrfmiddlewaretoken', document.querySelector('[name="csrfmiddlewaretoken"]').value);

    // 发送异步请求到后端
    fetch('你的后端路由地址', {
        method: 'POST',
        body: postData
    }).then(response => response.json())
    .then(backData => {
        // 此处处理后端返回的结果，比如更新页面显示内容
        console.log(backData);
    })
})
</script>

后端代码调整 #

修改视图支持返回JSON格式响应：

from django.http import JsonResponse

def your_view_func(request):
    if request.method == 'POST':
        if request.POST.get('fah'):
            # 此处写入你的业务处理逻辑
            return JsonResponse({
                "code": 200,
                "msg": "处理成功",
                # 补充你需要返回给前端的业务数据
            })
    # GET请求返回页面
    return render(request, '你的模板文件名.html')

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