时间戳

首页 > 解决方案 > 通过ajax将项目从django模板中的forloop填充数据发送到django视图

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

问题描述

我一直在尝试在我的 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 的问题。谢谢

标签： javascriptjqueryhtmlajaxdjango

解决方案

用属性替换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()
});

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

推荐阅读