django - 使用 Ajax 更新 Django 上下文变量
问题描述
我花了相当长的时间试图找到一个解决方案,但我对 Django 还很陌生,我似乎无法解决这个问题。
在我的详细视图中,我传递了要在模板中显示的产品(产品)以及产品的第一个产品类型(pid)。
当通过 detail.html 中的下拉框选择新产品类型时,我需要在不重新加载页面的情况下更新产品类型上下文变量,以便可以将其作为 URL 中的参数发送到 cart_add 视图。
我想我可以使用 Ajax 来做到这一点。我可以显示所选产品类型的值,但我不知道如何将上下文变量更新为这个新值。
视图.py
def product_detail(request, id, slug):
product = get_object_or_404(Product, id=id, slug=slug)
product_types = ProductType.objects.filter(product=product, available=True)
pid = product_types[0]
mylist = []
for product_type in product_types:
mylist.append(dict((x.base, x.value) for x in ProductAttribute.objects.filter(product_type=product_type)))
category = Category.objects.get(id=product.category.id)
parent_category = category.parent_category
cart_product_form = CartAddProductForm()
return render(
request,
'shop/product/detail.html',
{'parent_category':parent_category, 'category':category, 'product': product, 'cart_product_form': cart_product_form, 'product_types': product_types, 'mylist': mylist, 'pid':pid}
def load_product_type(request):
product_type_id = request.GET.get('product_type_pk')
product_type = ProductType.objects.get(id=product_type_id)
return render(request, 'shop/product/product-type.html', {'product_type': product_type})
产品类型.html
{{product_type.id}}
详细信息.html
<select name="product_type" id="product_type" data-product_type-url="{% url 'shop:ajax_load_product_type' %}" required class="form-control">
{% for product_type in product_types %}
<option value="{{product_type.id}}">{{product_type.reference}}</option>
{% endfor %}
</select>
<p class="product-id" id="product-id"></p>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#product_type").change(function () {
var url = $("#product_type").attr("data-product_type-url");
var product_type_pk = $(this).val();
$.ajax({
url: url,
data: {
'product_type_pk': product_type_pk,
},
success: function (data) {
// instead of showing it in the template, I want something like
// pid = data
$("#product-id").html(data);
}
});
});
</script>
// This is where I want to assign to pid the new selected product type
<form action="{% url 'cart:cart_add' pid.id %}" method="post">
{{ cart_product_form }}
{% csrf_token %}
<input type="submit" value="Add to cart">
</form>
谢谢您的帮助
解决方案
我假设您只是想更改表单的 action 属性。首先在您的表单上设置一个 id:
<form action="{% url 'cart:cart_add' pid.id %}" method="post" id="my-form">
现在在你的模板中product-type.html
写:
{% url 'cart:cart_add' product_type.id %}
现在在你的成功函数中的javascript(对于ajax):
$("#my-form").attr("action", data);
注意:也许发送JsonResponse 比简单地通过在模板中呈现数据来发送数据更具指示性
推荐阅读
- python - SMOTE 用于不平衡特征的回归
- bash - Bash:如何在不通过 SSH 回显的情况下从标准输入读取密码
- spring-boot - 如果表不存在,如何防止创建 Spring Boot 存储库?
- c# - 统一从另一个脚本中获取列表
- spring - Spring boot 2.4.2 在 ResponseEntity 中无法正常工作,返回 409(冲突)
- python - Slack 机器人连接问题
- excel - VBA 将基于单元格值的特定工作表导出为 PDF
- python - 使用非传统图表的 pine 脚本中基于百分比的停止
- multithreading - Matlab 产生的线程太多了
- ruby-on-rails - ActiveRecord:如何查询特定工作日(例如周一、周二等)创建的记录