如何使用 DJANGO REST 框架和 ajax 发出 POST 请求

Question

这是我的模型课：

    class PoliceAssurance(models.Model):
        Numpolice = models.IntegerField()
        Raison = models.CharField(max_length=50)
        Tel = models.IntegerField()
        Email = models.CharField(max_length=50)

这是我的序列化器：

    class PoliceSerializer(serializers.ModelSerializer):        
        class Meta:
            model = PoliceAssurance
            fields = ('Numpolice','Raison','Tel','Email');

现在，我需要通过 AJAX 调用发出 POST 请求。谁能提供有关我如何完成这项任务的信息？

这是我的观点.py

@login_required(login_url="login/")
def home(request):
    return render(request,"home.html")

class PoliceViewset(generics.ListCreateAPIView):    
    queryset = PoliceAssurance.objects.all()
    serializer_class =  PoliceSerializer    

和我的 urls.py

    urlpatterns=[
    url(r'^$', views.home, name='home'),
    url(r'PoliceAssurance',views.PoliceViewset.as_view(),              name='PoliceAssurance'),
    ]

这是我的ajax请求

$(#suit).click(function(){          

    var data = {};
    data.Numpolice = $(#num).val();
    data.Raison = $(#raison).val();
    data.Tel = $(#tel).val();
    data.Email = $(#email).val();

    $.ajax({
        type: "POST",
        url: "/PoliceAssurance/",
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(data){
            alert(data);
        },
        failure: function(errMsg) {
            alert(errMsg);
        }
    });
});

Answer 1

您可能需要看到这个，http://www.django-rest-framework.org/topics/ajax-csrf-cors/#javascript-clients和此链接中的django文档（详细信息），并且我的代码有效对我来说很喜欢

$.ajax({
    url: 'your web url',
    type: 'POST',
    beforeSend: function (xhr, settings) {
        xhr.setRequestHeader("X-CSRFToken", '{{ csrf_token }}');
    },
    success: function (arg) {
        location.reload()
    }
})

Django Rest 框架不像普通的 Django 那样工作。您需要将数据中的“csrfmiddlewaretoken”转换为RequestHeader中的“X-CSRFToken”或“HTTP-X-CSRFToken”

Answer 2

您可能需要将 CSRF 信息与 Ajax 请求一起发送，或者免除您的查看。请参阅此处。如果你在 ajax 中包含这个 beforeSend 函数，它就可以解决这个问题：

    $.ajax({
          type: "POST",
          ...
          beforeSend: function(xhr, settings) {
                  if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                          xhr.setRequestHeader("X-CSRFToken", {% csrf_token %});
               }
          },
          ...

假设 javascript 是模板的一部分，则可以通过 {% csrf_token %} 获取 csrftoken。

希望这有帮助。

Answer 3

只需编辑 Tico Tico

的现有答案

$.ajax({
    url: 'your web url',
    type: 'POST',
    headers: {"X-CSRFToken": "{{ csrf_token }}"},
    success: function (arg) {
        location.reload()
    }
})

Answer 4

<code><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script>
    $(document).ready(function(){
        var csrftoken = Cookies.get('csrftoken');

        $(".auto-submit").change(function() {
            $.post({
                url: "{% url 'get-checkin-type' %}",
                data: $(".auto-submit option:selected").val(),
                headers: {
                    X-CSRFToken: csrftoken
                }
            })
        });
    });
</script>


<form action="" method="post">{% csrf_token %}
    {% for field in form %}
        <div class="{% if field.name == 'checkin_type' %}auto-submit{% endif %}">
            {{ field.errors }}
            {{ field.label_tag }}
            {{ field }}
        </div>
    {% endfor %}
    <input type="submit" value="Send message" />
</form>
</code>