Django：ページを再ロードせずにフォームを送信したり、別のページにレンダリングせずにPOSTリクエストを行いますか？

Question

私は2日以上この問題に苦労しています。私はここで同様の質問をしていますが、多くの文書に目を通していますが、何も助けてくれませんでした。私はDjangoパッケージのdjango-friendshipを使用していますが、私は次のようにしたいと考えています：ユーザーが他の誰かのプロフィールにいるとき、友だちの追加]ボタンをクリックすると、友達のリクエストを送信する必要があります。しかし、私はページを再ロードせずに別のものにレンダリングせずにこれを達成したいと思います。リクエストを送信するためにトリガされなければならないメソッドはviews.pyにあります。おそらく私はajaxを使用する必要がありますが、どのような方法ですか？私の最終的な目標は、例えば、（リロードせずに）Facebookの「友達を追加」ボタンとして実行するボタンです。

friend_profile.html

<form action="{% url 'users:fr_request' pk=friend.id %}" method="POST"> 
{% csrf_token %} 
<input type="submit" value="Add friend"/> 

views.py

def friendship_add(request, pk): 
if request.method == 'POST': 
    to_user = User.objects.get(pk=pk) 
    from_user = request.user 
    try: 
     Friend.objects.add_friend(from_user, to_user) 
    except AlreadyExistsError as e: 
     print('Exception when adding a friend ' + e) 
    else: 
     return HttpResponse('You added a friend') 

return render(request, 'users/friend_profile.html') 

urls.py

urlpatterns = [ 
url(r'users/(?P<pk>\d+)/send/$', views.friendship_add, name='fr_request'), 

]

フォームの送信時に、私は/（？P \ d +）/ send /にビューメソッドを呼び出し、Friend.objects.add_friendを実行するユーザーにページをレンダリングしますが、 /ページ、または現在の読み込み？

Answer 1

これはjQueryを使用すると簡単に実現できます。あなたのページで複数のフォームがある場合は、フォームにIDを割り当てることがあります。

<form action="{% url 'users:fr_request' pk=friend.id %}" method="POST" id="friend_form"> 
    {% csrf_token %} 
<input type="submit" value="Add friend"/> 

スクリプトは、そのようになります。詳細については

$(function() { 
    $("#friend_form").submit(function(event) { 
     // Stop form from submitting normally 
     event.preventDefault(); 
     var friendForm = $(this); 
     // Send the data using post 
     var posting = $.post(friendForm.attr('action'), friendForm.serialize()); 
     // if success: 
     posting.done(function(data) { 
      // success actions, maybe change submit button to 'friend added' or whatever 
     }); 
     // if failure: 
     posting.fail(function(data) { 
      // 4xx or 5xx response, alert user about failure 
     }); 
    }); 
}); 

および実施例はを参照してください。 jQuery.post() documentation。