Question

我的网站上有＆＃34;关注＆＃34; 按钮，就像在Twitter中一样。但是这个按钮只有html而没有任何js。我对js / jquery / ajax一无所知。任何人都可以帮助我，在没有页面刷新的情况下提交此表单的做法是什么？谢谢。

模板＆＃39; event.html＆＃39; ：

{% if user in event.users.all %}
        <form action="/event/{{ event.id }}/" method="GET">
        {% csrf_token %}
        <input type="hidden" value="{{ event.id }}" name="remove">
        <input type="submit" class="btn btn-warning btn-block" value="{% trans "Remove from My Events"%}">
        </form>
{% else %}
        <form action="/event/{{ event.id }}/" method="GET">
        {% csrf_token %}
        <input type="hidden" value="{{ event.id }}" name="add">
        <input type="submit" class="btn btn-primary btn-block" value="{% trans "Add to My Events"%}">
        </form>
{% endif %}

views.py：

def show_event(request, event_id):
    event = get_object_or_404(Event, id=event_id)
    user = request.user
    if request.GET.get('add'):
        event.users.add(user)
        event.save()
    if request.GET.get('remove'):
         event.users.remove(user)
         event.save()
    return render(request, 'events/event.html', {'event':event, 'user':user}

Answer 1

首先要学习Javascript和Jquery以及Ajax以便更清楚地理解。 http://www.tutorialspoint.com/jquery/
http://www.w3schools.com/jquery/

模板'event.html'：

{% if user in event.users.all %}
    <form action="/event/{{ event.id }}/" method="GET" id="event">
    {% csrf_token %}
    <input type="hidden" value="{{ event.id }}" name="remove">
    <input type="submit" class="btn btn-warning btn-block" value="{% trans "Remove from My Events"%}">
    </form>
{% else %}
    <form action="/event/{{ event.id }}/" method="GET">
    {% csrf_token %}
    <input type="hidden" value="{{ event.id }}" name="add">
    <input type="submit" class="btn btn-primary btn-block" value="{% trans "Add to My Events"%}">
    </form>
{% endif %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
$('#event').submit(function(e){
    e.preventDefault();
    url = $(this).attr('action') # to get url
    data = $(this).serialize(); # for sending form data 
    $.post(url, data, function(response){
          # do whatever you want with response(data)
    })
})
</script>

Answer 2

我同意上述评论。下面是我在遇到这个问题时做了一些更广泛的谷歌搜索时遇到的教程。这是一个功能齐全的指南：

The tutorial I wish I'd had when I was learning JQuery

Answer 3

不可能，Python是服务器端语言，如果要处理数据，则需要将信息发送到服务器。

我第一次这样做，我在YouTube上看到了这个视频：https://www.youtube.com/watch?v=KgnPSmrQrXI

提交无需刷新 - Django

3 个答案: