Javascript Django：在表单提交时发出POST请求，而不重新加载页面或呈现给其他页面？

我已经为这个问题挣扎了两天多，我在这里看到了类似的问题，也看到了许多文档，但没有任何帮助。基本上，我正在构建一个Django web应用程序（人们可以在其中添加自己作为朋友）。我正在使用Django包Django friends，但我希望发生以下情况：当用户在其他人的配置文件中时，第一个用户可以单击“添加朋友”按钮，并且必须发送朋友请求。但我希望在不重新加载页面或渲染到另一个页面的情况下实现这一点。发送请求必须触发的方法位于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"/>

url.py

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

urlpatterns=[
url（r'users/（？P\d+）/send/$”，views.friendy\u add，name='fr\u request'），

]

---

在提交表单时，我将页面呈现给users/（？p\d+）/send/，后者调用view方法并执行Friend.objects.add\u Friend，但我希望这样做不会转到/send/page或重新加载当前的？

这可以通过jQuery轻松实现。如果页面中有多个表单，您可能需要为表单分配一个id：

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

---

有关更多信息和示例，请参阅。

这可以使用jQuery轻松实现。如果页面中有多个表单，您可能需要为表单分配一个id：

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

---

有关更多信息和示例，请参阅。

嗯，您的标记包括“ajax”，这确实是您需要使用的。您尝试过什么？我尝试过使用ajax和所需的数据来处理表单，但它需要“url”，我希望避免这种情况，因为它将调用url（然后是视图等），并且新页面仍将呈现-我不想要这种情况？你觉得怎么办？我不明白你在说什么。您的Ajax脚本应该发布到一个视图中，该视图返回JS更新页面所需的数据，而无需重新加载。对于这种模糊性，很抱歉，也许我误解了什么，现在当我尝试@rafalmp代码时，它可以工作了！好的，您的标记包括“ajax”，这确实是您需要使用的。您尝试过什么？我尝试过使用ajax和所需的数据来处理表单，但它需要“url”，我希望避免这种情况，因为它将调用url（然后是视图等），并且新页面仍将呈现-我不想要这种情况？你觉得怎么办？我不明白你在说什么。您的Ajax脚本应该发布到一个视图中，该视图返回JS更新页面所需的数据，而无需重新加载。对于这种模糊性，很抱歉，也许我误解了什么，现在当我尝试@rafalmp代码时，它可以工作了！太好了，我想它能正常工作，真的很有帮助，谢谢！太好了，我想它能正常工作，真的很有帮助，谢谢！

$(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
        });
    });
});