リフレッシュしないで送信 - Django

私は"follow"ボタンをTwitterのように私のウェブサイトに持っています。しかし、このボタンはjsなしでhtmlのみです。私はjs/jquery/ajaxについて何も知らない。誰も私を助けることができます、私はどのようなsholud私はこのフォームを更新せずにフォームを提出するのですか？ありがとうございました。リフレッシュしないで送信 - Django

テンプレート'event.html'：

{% 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}

出典

2016-03-29 senergo

このような質問にはポイントがありません。あなたがJSやAjaxについて何も知らないのなら、あなたは学ぶべきです。 jQueryのサイトなど、たくさんのドキュメントがあります。 –

まずより明確に理解するためには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>

出典

2016-03-29 11:22:27

ありがとうございます。この例ではエラーがあります - （index）：148 Uncaught TypeError：$（...）。actionsは関数ではありませんそれはどういう意味ですか？ – senergo

@senergo申し訳ありませんが、私は機能を欠場しました。今それは動作します。 –

@senergoそれは今働きます。一度チェックしてください。 –