将项目从 django 模板中的 forloop 填充数据通过 ajax 发送到 django 视图

Question

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

性别.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函数：

获取猫（）

 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()
});

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