通过Ajax将Django模板中的forloop填充数据中的项目发送到Django视图

Question

我一直试图在我的django电子商务应用程序中创建一个单击并用ajax填充div。该项目的运作方式是，当客户单击男士页面中的类别时，它将填充另一个div

gender.html

{%for cate in cat%}
            <a href="javascript:getcat()" id="catgend" cats-data="{{cate.catname}}" gen-data="{{gens.gender}}" data-sort-url="{% url 'Home:sortcat' cpk=cate.pk %}" >{{cate.catname}}</a>
          {% endfor %}
          <div id="products">
            <div class="progress">
                <img src="{% static 'img/load.gif'%}">
            </div>
          </div>

---

这通过称为getcat的ajax函数将数据发送到我的django视图，但无论单击的是哪个循环项，发送的数据都是循环中第一项的数据。下面是我的ajax函数：

getcat（）

function getcat() {
	  $(".progress").show()
      var cat = $("#catgend").attr("cats-data");  
      var gender= $("#catgend").attr("gen-data");
      var url = $("#catgend").attr("data-sort-url");  
      $.ajax({                       
        url: url,                    
        data: {
          'cat': cat,
          'gender':gender,     
        },
        success: function (data) {   
          $("#products").html(data);  
        }
      });
      $(".progress").hide()
  

  }

enter code here

从我的研究中，我发现了它，因为它们具有相同的ID。我该如何解决在同一循环中动态更改ID的问题。谢谢

Answer 1

将id属性替换为class属性，因为您不应该只有多个具有相同id的元素。另外，我们可以将cats-data和gen-data更改为有效的data-*属性。

{% for cate in cat %}
  <a href="#" class="catgend" data-cats="{{cate.catname}}" data-gen="{{gens.gender}}" data-sort-url="{% url 'Home:sortcat' cpk=cate.pk %}" >{{cate.catname}}</a>
{% endfor %}

绑定单击事件以使用新的类名称进行定位。

$('.catgend').on('click', function (e) {
    $('.progress').show()
    var data = $(this).data()
    $.ajax({                       
        url: data.sortUrl,                    
        data: {
            'cat': data.cats,
            'gender': data.gen,     
        },
        success: function (data) {   
            $('#products').html(data);  
        }
    });
    $('.progress').hide()
});

利用数据属性以简单的方式累积数据值。