为什么ajax在html模板中返回循环的最新变量？答案

【问题标题】：Why ajax returns the latest variable of a loop in html template?为什么ajax在html模板中返回循环的最新变量？
【发布时间】：2021-01-31 18:31:57
【问题描述】：

我有一个html文件如下：

<div  id="preview_updated_notifications">
      {% for lst in unread_list %}

         <div >
           <span data-notification-item="{{ lst.id }}" id="_mark_as_read_id"> ●</span>                             
         </div>
      {% endfor %}
</div>

在js文件中：

$(document).on('click', "#_mark_as_read_id", function() {
    var object_id =  $('#_mark_as_read_id').data('notification-item');

    console.log('--------------object_id:------------')
    console.log(object_id)
    console.log('--------------------------')

    $.ajax({
                  type: "GET",
                  url: "{% url '_mark_as_read' object_id %}",
                  dataType: 'json',
                  data: {
                        'object_id': object_id,
                  },

                  dataType: 'json',
                  success: function (data) {
                      $('#preview_updated_notifications').html('**TEST**');

                  }
            });
            event.preventDefault();
    });

但问题是这总是打印循环的最新值，而我希望在单击每个项目后● 检索相对id！

【问题讨论】：

您还必须在 for 循环中添加 javascript 代码并将 {{ lst.id }} 添加到您的 html id。

标签： html jquery django ajax

【解决方案1】：

忽略非唯一 ID 的问题，您可以像这样委托

$("#preview_updated_notifications").on("click","[data-notification-item]",function() {
  const id = $(this).data("notification-item");
  ....
})

【讨论】：

我喜欢你的解决方案，但我不知道为什么它不执行 ajax 部分？！
@J2015 你什么意思？我的代码只是一个 sn-p

【解决方案2】：

在

      {% for lst in unread_list %}

         <div >
           <span data-notification-item="{{ lst.id }}" id="_mark_as_read_id"> ●</span>                             
         </div>
      {% endfor %}

渲染了许多跨度，每个跨度都具有相同的id。 id 在 HTML 中应该是唯一的，这就是为什么只有一个 span 回复你的原因。

【讨论】：

【解决方案3】：

{% url '_mark_as_read' object_id %} 是一个 Django 模板标签，这意味着它在页面第一次加载时被渲染，所以 object_id 的值将始终是最初作为上下文传递的值，从视图中。

您可以使用另一个 HTML 属性来存储每个 span 的更新 URL，这将允许您使用 Django {% url ... %} 标记。

此外，由于您在 for 循环中有 id="_mark_as_read_id"，因此每个 <span> 元素都将具有相同的 ID。 ID 应该是唯一的。您应该改用一个类，并相应地更新 click 函数中的选择器。

HTML：

<span data-notification-item="{{ lst.id }}" class="mark-as-read" data-update-link="{% url '_mark_as_read' lst.id %}"> ●</span>

jQuery:

$(document).on('click', ".mark-as-read", function() {

然后在你的 jQuery 中你可以像这样访问它：

var update_url =  $(this).data('update-link');

【讨论】：

【解决方案4】：

您使用 django for loop 仅用于 html，javascript 代码也需要在您的 for loop 中，如下所示：

<div  id="preview_updated_notifications">
{% for 1st in unread_list %}

<div >
    <span data-notification-item="{{ lst.id }}" id="_mark_as_read_id{{ lst.id }}"> ●</span>                             
</div>
<script> 
$(document).on('click', "#_mark_as_read_id{{ lst.id }}", function() {
    var object_id =  $('#_mark_as_read_id{{ lst.id }}').data('notification-item');

    console.log('--------------object_id:------------')
    console.log(object_id)
    console.log('--------------------------')

    $.ajax({
                  type: "GET",
                  url: "{% url '_mark_as_read' object_id %}",
                  dataType: 'json',
                  data: {
                        'object_id': object_id,
                  },

                  dataType: 'json',
                  success: function (data) {
                      $('#preview_updated_notifications').html('**TEST**');

                  }
            });
            event.preventDefault();
    });
</script>
{% endfor %}
</div>

对于每个 span html id，添加了{{ lst.id }}。所以 id 就像 (_mark_as_read_id1, _mark_as_read_id2, _mark_as_read_id3, ....)。

现在，它会在点击每一项后得到●检索相对id！

【讨论】：