将模板中的按钮中的 id 传递给 Django 视图

Posted 2023-05-08

【中文标题】将模板中的按钮中的 id 传递给 Django 视图

【英文标题】：Pass id from button in template to Django View

【发布时间】：2021-09-16 14:06:34

【问题描述】：

我在第二周尝试学习 Python+Django 并想做一个小项目。但是我被一些 JS-bs 卡住了。我对 JS 不太了解，需要一些帮助。

我想将所选按钮的 ID（按钮中的“值”）作为数据传递给 Ajax 函数，但无法真正实现。

如何将值传递给 Ajax 函数？我想在视图中使用“id”变量中的值。

谢谢！

HTML - 我想传递选定按下按钮的 ID。

% for product in products %
   <button type="button" id="submit" class="btn" value="product">product</button>
% endfor %

Javascript 到这里的 Ajax POST 函数。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var data = new FormData();
 $(document).on('click', '#submit', function(e) 
  data.append('action', 'toggle_button')
  data.append('csrfmiddlewaretoken', ' csrf_token ')
  $.ajax(
       type: 'POST',
       url: '% url "toggle_button" %',
       data: data,
       cache: false,
       processData: false,
       contentType: false,
       enctype: 'multipart/form-data',
  )
)
</script>

Django 视图文件

from django.http import HttpResponse, request
from django.shortcuts import render
from django.http import JsonResponse

def home_view(request):
    context = 
    "products": ["Button1", "Button2", "Button3", "Button4"],
    
    return render(request, "home.html", context)


def toggle_button_view(request):
    if request.POST.get('action') == 'toggle_button':
        token = request.POST.get('csrfmiddlewaretoken')
        id = request.POST.get("id")
        #print (token)
        print (id)
    return render(request, "home.html")

【问题讨论】：

当您有多个产品时，将按钮的id 属性设置为"submit" 不是一个好主意，因为您最终会得到多个具有相同ID 的按钮。循环通过产品时使用forloop.counter 动态设置id。

【参考方案1】：

这是因为您没有将 ID 传递给视图。 我修改了您的 JS 事件以处理包含调用该事件的对象的 $(this) 变量：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var data = new FormData();
 $(document).on('click', '#submit', function(e) 
  data.append('action', 'toggle_button')
  data.append('csrfmiddlewaretoken', ' csrf_token ')
  data.append('id', $(this).val())
  $.ajax(
       type: 'POST',
       url: '% url "toggle_button" %',
       data: data,
       cache: false,
       processData: false,
       contentType: false,
       enctype: 'multipart/form-data',
  )
)
</script>

注意我是如何添加data.append('id', $(this).val())