Question

我正在尝试使用reddit / jquery来实现类似ajax的投票系统。如何通过单击按钮传递每个id的对象Post？

{% for post in posts %}
    <h2>{{ post.title }}</h2>
    {{ post.upvotes }}<button type="submit">Upvote</button>
    {{ post.downvotes }}<button id="downvote" type="submit">Downvote</button>
{% endfor %}

<script>
    # Somehow need to distinguish between upvote/downvote and include object id
    $(?).click(function () {
        var id = id
        $.ajax({
            url: '/ajax/upvote/',
            data: {
                'id': id
            }
        });
    });
</script>

Answer 1

可以使用id将data-id作为属性添加到每个按钮标签。并知道哪种投票类型，您也可以将其添加到数据属性data-vote

{% for post in posts %}
    <h2>{{ post.title }}</h2>
    {{ post.upvotes }}<button data-id="{{post.id}}" data-vote="up" class="vote" type="submit">Upvote</button>
    {{ post.downvotes }}<button data-id="{{post.id}}" data-vote="down"  class="vote" id="downvote" type="submit">Downvote</button>
{% endfor %}

并使用js将事件添加到类.vote上：

<script>
# Somehow need to distinguish between upvote/downvote and include object id
$(".vote").click(function () {
    var id = $(this).data("id"),
        vote_type = $(this).data("vote");
    $.ajax({
        url: '/ajax/upvote/',
        data: {
            'id': id,
            'vote_type':vote_type,
        }
    });
});

Answer 2

如果需要两个不同的端点，则可以对按钮使用onclick属性。如果您希望将投票类型作为参数发送到同一端点，则只需在点击事件中作为第二个参数调用即可。

{% for post in posts %}
    <h2>{{ post.title }}</h2>
    {{ post.upvotes }}<button onclick="upvote({{post.id}});" class="upvote" type="submit">Upvote</button>
    {{ post.downvotes }}<button onclick="downvote({{post.id}});" class="downvote" type="submit">Downvote</button>
{% endfor %}

<script>
    function upvote (post_id) {
        $.ajax({
            url: '/ajax/upvote/',
            data: {
                'id': post_id
            }
        });
    }
    function downvote(post_id) {
        $.ajax({
            url: '/ajax/downvote/',
            data: {
                'id': post_id
            }
        });
    }
</script>

单击按钮后如何将Django对象ID传递给jquery / ajax？

2 个答案: