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

Question

我在第 2 周尝试学习 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")

Answer 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())