Django:在表单提交上发出POST请求而不重新加载页面或呈现给另一个页面?

时间:2016-07-22 12:34:37

标签: javascript jquery ajax django django-forms

我一直在努力解决这个问题超过两天,我在这里和许多文件中都看过类似的问题,但没有任何帮助。基本上,我正在构建一个Django Web应用程序(人们可以将自己添加为朋友)我正在使用Django包django-friendship,但我想要发生以下情况:当用户在其他人的个人资料中时,第一个可以点击& #39;添加朋友'必须发送按钮和朋友请求。但我希望在不重新加载页面或渲染到另一个页面的情况下实现此目的。必须为了发送请求而触发的方法是在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 /,它调用了view方法并执行了Friend.objects.add_friend,但是我想要这样做而不去/发送/分页或重新加载当前的信息?

1 个答案:

答案 0 :(得分:4)

这可以使用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