Django使用CSRF令牌向views.py发送POST请求，然后重定向页面

Question

我最初对视图进行了AJAX调用，然后我意识到我不能return render(request, 'my/new/template.html, context)

所以我遇到了这个相关的问题，这让我想到了下面的内容：从Javascript 接收数据后重定向到新页面

然而，我在让CSRF令牌工作时遇到了问题，它给了我一个403错误。顺便说一句，我也在使用shell_plus来使用安全连接，但我不认为这是造成问题的原因。

这是我对视图函数的调用：

submitForm.addEventListener('submit', function (e) {
const form = new FormData(e.target);
// const csrf_token = form.get("csrfmiddlewaretoken");
// instead using var csrf_token = {{ csrf_token }} in template
e.preventDefault()
instance.requestPaymentMethod(function (err, payload) {
var url = '/shop/payment/';
var newForm = '<form action="' + url + '" method="post">';
newForm += '<input type="hidden" name="csrf_token" value="' + csrf_token +'" />'
newForm += '<input type="hidden" name="paymentMethodNonce" value="' + payload.nonce + '" />'
newForm += '<input type="hidden" name="orderTotal" value="' + order_total + '" />'
newForm += '<input type="hidden" name="address" value="' + $('#address-select').val() + '" />
newForm += '<input type="hidden" name="first-name" value="' + form.get("first-name") + '" />'
newForm += '<input type="hidden" name="last-name" value="' + form.get("last-name") + '" />'
newForm += '</form>'
var form_element = $(newForm);
$('body').append(form_element);
form_element.submit();
});

我之前使用ajax的尝试看起来是这样的：

$.ajax({
type: 'POST',
url: '/shop/payment/',
headers: { "X-CSRFToken": csrf_token },
data: {
'paymentMethodNonce': payload.nonce,
'orderTotal': order_total,
'address': $('#address-select').val(),
'first-name': form.get("first-name"),
'last-name': form.get("last-name")
}
}).done(function (result) {
console.log(result.result)
// WON'T REDIRECT
});

Answer 1

我通过使用方法="的正则形式解决了这个问题；帖子"：

<form id="braintree-submit-form" method="post" action="{% url 'shop:payment' %}">
{% csrf_token %}
{# added any inputs I could get from the template here, for example #}
<input type="text" name="first-name" class="form-control" value="{{ request.user.first_name}}" required />
{# ... #}

我仍然需要添加一些表单输入，我只能通过javascript访问它们的值，但最终得到了一个更短、更简单的函数。原因是这是Braintree的Dropin UI的实现。

submitForm.addEventListener('submit', function (e) {
e.preventDefault()
instance.requestPaymentMethod(function (err, payload) {
var nonceInput = document.createElement("input")
nonceInput.setAttribute('name', 'paymentMethodNonce')
nonceInput.setAttribute('value', payload.nonce)
nonceInput.setAttribute('type', 'hidden')
submitForm.appendChild(nonceInput)
var addrInput = document.createElement("input")
addrInput.setAttribute('name', 'address')
addrInput.setAttribute('value', $('#address-select').val())
addrInput.setAttribute('type', 'hidden')
submitForm.appendChild(addrInput)
submitForm.submit()
})