如何解决Django使用CSRF令牌将POST请求发送到views.py,然后重定向页面
我本来是通过AJAX调用视图的,然后我意识到我无法return render(request,'my/new/template.html,context)
因此,我遇到了一个相关问题,导致我看到以下内容:Redirect to new page after receiving data from 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
});
解决方法
我通过使用带有method =“ post”的常规形式解决了这个问题:
<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's 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()
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。