(Django) Ajax - 多个对象

Question

我真的需要一些关于 Ajax 和 Django 的帮助！我正在尝试遍历所有Item 对象，以便每个对象都有一个单独的表单，允许用户使用ajax 按钮favorite 项目。 这是我的表格：

<div class="row">
{% for item in items%}
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        {% if item.photo %}
      <img src="{{ MEDIA_URL }}{{item.photo.url}}">
        {% endif %}
      <div class="caption">
        <h3>{{item.name}}</h3>
        <p>{{item.description}}</p>
        <h3>Price: {{item.price}}</h3>
        <h3>Rating: {{item.rating}}</h3>
        <p>
            <form id="add_favorite_form">
                {% csrf_token %}
                <button id='fav' class='btn btn-primary' type="submit" data-itemid="{{item.id}}" value="Favorite">
                Favorite
                <span class="glyphicon glyphicon-thumbs-up"</span></a>
            </form>
        </p>
      </div>
    </div>
  </div>
{% endfor %}
</div>

这里是 Ajax：

    <script type="text/javascript">
        $(document).on('submit', '#add_favorite_form',function(e){
            e.preventDefault();
            var $fav = $('#fav');
            $.ajax({
                type: "POST",
                url: "/items/favorites/",
                data: {
                    id: $($fav).attr('data-itemid'),
                    csrfmiddlewaretoken:$("input[name=csrfmiddlewaretoken]").val()
                },
                success: function(){
                    alert("button works but is broken. Only the first Item instance is added to favorites")

                }
            });
        });
    </script>

最后，我的观点：

def favorite_item(request):
    favorites, created = Favorite.objects.get_or_create(user=request.user)
    if request.method == "POST":
        id = request.POST['id']
        item = Item.objects.get(id=id)
        print item
        favorites.items.add(item)
        favorites.save()
    return HttpResponse(' ')

如您所见，按钮使用{{item.id}} 作为data-* 属性，所以我假设这会将每个item.id 的值传递给ajax 脚本中的变量var $fav = $('#fav');。但是，似乎只传递了第一个 item.id，因为这是添加到 favorites 的唯一 Item 对象。

我该如何解决这个问题？感谢您的帮助。

Answer 1

1. 您正在循环内创建一个 ID 为 fav 的 HTML 元素。如果循环不止一次迭代，这将导致多个元素具有相同 id 的 HTML 不正确。

2. 您查找的是$('#fav')，而不是触发提交事件的元素。

=> 从您的标记中删除 id='fav'。 （如果需要，您可以添加类似id='fav-{{item.id}} 的 ID，但这不是必需的。

=> 改变你的 JS：

<script type="text/javascript">
    var csrftoken = $("input[name=csrfmiddlewaretoken]").val();
    $(document).on('submit', '#add_favorite_form',function(e){
        e.preventDefault();
        var itemId= $(e.target).data('itemid');  // jquery +1.4.3 or attr()
        $.ajax({
            type: "POST",
            url: "/items/favorites/",
            data: {
                id: itemId,
                csrfmiddlewaretoken: csrftoken
            },
            success: function(){
                alert("Added favorite " + itemId);
            }
        });
    });
</script>

编辑：

一个更简单的方法是使用表单，然后通过 AJAX 提交。

<form id="add_favorite_{{ item.id }}" class="add_favorite_form" method="POST" action="{% url 'add-favorite' %}">
    {% csrf_token %}
    <input type="hidden" name="id" value="{{ item.id }}" />
    <button id='fav' class='btn btn-primary' type="submit" value="Favorite">
        Favorite
    <span class="glyphicon glyphicon-thumbs-up"</span></a>
</form>

JS：

<script type="text/javascript">
    var csrftoken = $("input[name=csrfmiddlewaretoken]").val();
    $(document).on('submit', '.add_favorite_form',function(e) {
        e.preventDefault();
        e.stopPropagation();
        var $form = $(this);
        var url = $form.attr( "action" );
        var thisId = $form.attr( "id" );
        $.post(url, $form.serialize())
            .done(function(data) {
                alert("Added favorite " + thisId);
            });
    });
</script>

Answer 2

您有几处错误，但导致您出现问题的原因是$('#fav') 只会在页面上找到具有该 ID 的第一个元素。

您会发现很难调整当前的 javascript，因为它依赖于页面提交。您可以将其更改为仅让按钮使用 onclick 事件。

您仍然只需要包含 CSRF 令牌，但有很多关于如何做到这一点的资源。

<button onclick="favourite({{item.id}})" class='btn btn-primary' value="Favorite">

function favourite(id){
    // Use the id passed to the method
}