將模板中的按鈕 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())