Django:将JS dict发送到Django View



所以,我有一个JS dict,我想把它发送到我的Django View,因为我需要用它来调用一个函数,使用python库。

我需要将:dir_charge发送到我的Django View,但这是在一个名为culqi()的JS函数中,该函数负责创建dict中的source_id字段和email字段:

js:

此函数culqi()从问题末尾的表单中获取数据。

<script>
function culqi() {
if (Culqi.token) { // ¡Objeto Token creado exitosamente!
var dir_charge = {
amount: 24,
currency_code: "PEN",
email: Culqi.token.email,
source_id: Culqi.token.id
};
} else { // ¡Hubo algún problema!
// Mostramos JSON de objeto error en consola
console.log(Culqi.error);
alert(Culqi.error.user_message);
}
};
</script>

JS是在用户点击此按钮时生成的:

html:

<button id="buyButton">Pagar</button>

感谢这个其他JS:

<script>
$('#buyButton').on('click', function (e) {
// Abre el formulario con la configuración en Culqi.settings
Culqi.open();
e.preventDefault();
});
</script>

当用户点击该按钮时,会出现以下表单(它不是HTM1中的硬编码,而是从外部JS库调用的(:

<form class="form">
<div class="form-row">
<div class="col col-12">
<div class="form-group">
<div class="input">
<input name="cardNumber" autocomplete="cc-number" type="tel" maxlength="19" class="input-card"
data-mask="#### #### #### ####" data-previous-value="">
</div>
<label for="cardNumber" class="">Número de Tarjeta</label>
<div class="brand"></div>
</div>
</div>
</div>
<div class="form-row">
<div class="col col-6">
<div class="form-group">
<div class="input">
<input name="cardExp" autocomplete="cc-exp" type="tel" maxlength="5" class="input-card"
data-mask="##/##" data-previous-value="">
</div>
<label for="cardExp" class="">Mes / Año</label>
</div>
</div>
<div class="col col-6">
<div class="form-group">
<div class="input">
<input name="cardCVV" autocomplete="cc-csc" type="tel" maxlength="3" class="input-card"
data-mask="###" data-previous-value="">
</div>
<label for="cardCVV" class="">CVV</label>
<a>(?)</a>
</div>
</div>
</div>
<div class="form-row" style="display: none;">
<div class="col col-12">
<div class="form-group">
<div class="input">
<select name="custom-cuotas" id="" class="">
<option value="" selected="selected" disabled="disabled" hidden="hidden">Pagar en Cuotas
</option>
<option value="1">Sin Cuotas</option>
<option value="2">2 Cuotas</option>
<option value="4">4 Cuotas</option>
<option value="6">6 Cuotas</option>
<option value="8">8 Cuotas</option>
<option value="10">10 Cuotas</option>
<option value="12">12 Cuotas</option>
<option value="3">3 Cuotas</option>
<option value="5">5 Cuotas</option>
<option value="7">7 Cuotas</option>
<option value="9">9 Cuotas</option>
<option value="24">24 Cuotas</option>
<option value="48">48 Cuotas</option>
</select>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="col col-12">
<div class="form-group">
<div class="input">
<input name="cardEmail" autocomplete="email" type="email" class="input input-card">
</div>
<label for="cardEmail" class="">Correo Electrónico</label>
</div>
</div>
</div>
<div class="form-pay">
<button type="submit" class="btnAction">
<span>Pagar </span>
<span class="payText PEN">.24</span>
<small>PEN</small>
</button>
</div>
</form>

更新1:

urls.py:

来自django.url的导入路径从…起导入视图

app_name="cart">

urlpatterns = [
path('', views.cart_detail, name = 'cart_detail'),
path('full_remove/<int:cart_item_id>/', views.full_remove, name = 'full_remove'),
]

视图.py

def cart_detail(request):
print(amount)
print(currency_code)
print(email)
print(source_id)
pass

正如评论中所讨论的,您可能对Ajax感兴趣,希望您使用的是jQuery,您可以使用类似的东西

<script>
function culqi() {
if (Culqi.token) { 
$.ajax({
url: "your_url",
data: {
amount: 24,
currency_code: "PEN",
email: Culqi.token.email,
source_id: Culqi.token.id
}
}).done(function() {
// do something with scess
$( this ).addClass( "done" );
});
} else { 
console.log(Culqi.error);
alert(Culqi.error.user_message);
}
};
</script>

最新更新