当定义了两个jquery变量时，如何通过AJAX发送POST？
当定义了两个jquery变量时，如何通过AJAX发送POST？
提问于 2018-06-08 05:53:46
我猜这段代码中有不止一个错误--但我想弄清楚的主要问题是，当满足某个条件时，如何发送AJAX -即定义了产品和平台变量，并且不为空。使用下面的代码-我认为这一行只计算一次。我不知道是否需要添加某种类型的侦听器，或者这将如何与jQuery一起工作。我对jQuery完全陌生。如何调整我的代码，以便在定义平台和产品时发送帖子？本质上，我想要的是让用户能够通过复选框选择产品，通过另一个复选框选择平台-如果满足这些条件，发送带有这些参数的帖子，并在返回时接受查询结果。
html
<H3>Product</H3>
{% for product in products %}
<input type="radio" name="{{ product }}"> {{ product }}
<br>
{% endfor %}
<H3>Platform</H3>
{% for platform in platforms %}
<input type="radio" name="{{ platforms }}"> {{ platforms }}
<br>
{% endfor %}js
<script>
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_minimal-red',
radioClass: 'iradio_minimal-red',
increaseArea: '20%' // optional
});
// if product has a checkmark - assign to var
{% for product in products %}
$('input['{{ product }}']').on('ifClicked', function (event) {
var product = $(this).val();
{% endfor %}
// if platform has a checkmark - assign to var
{% for platform in platforms %}
$('input['{{ platform }}']').on('ifClicked', function (event) {
var platform = $(this).val();
{% endfor %}
// if both vars exist - send POST to /edit_view endpoint
if (product and platform) {
{
$.ajax({
type:"POST",
url:"/edit_view/",
data: {
'product': product
'platform': platform
},
success: function(){
$("#result").data($data);
}
});
return false;
});
}
});
</script>django视图
def edit_view(request):
products = Product.objects.all()
platforms = Platform.objects.all()
context = {"products": products, "platforms": platforms}
return render(request, "edit_view.html", context)
# handles AJAX - returns queryset data
if request.method == 'POST' and request.is_ajax():
product = request.POST['product']
platform = request.POST['platform']
if product and platform:
product_record = Product.objects.get(name=product)
platform_record = Platform.objects.get(name=platform)
records = Records.objects.filter(product=product_record, platform=platform_record)
return records
return HttpResponse(json.dumps({'records': records})) 回答 1
Stack Overflow用户
发布于 2018-06-08 06:45:24
正如你在上面的评论中提到的，要触发POST请求，你做的方式很好，再加上你需要发送Django的跨站请求伪造，你真的不需要另一个第三个框架来处理复选框/无线电，jquery就足够了。
首先，你的HTMl应该是这样的：
<H3>Product</H3>
{% for product in products %}
<input type="radio" name="product" value="{{ product.id }}"> {{ product }}<br>
{% endfor %}
<H3>Platform</H3>
{% for platform in platforms %}
<input type="radio" name="platform" value="{{ platform.id }}"> {{ platforms }}<br>
{% endfor %}在您的js中，添加一个侦听器，以便在用户单击广播时侦听，然后在用户单击其中一个并定义platform和product时调用该函数。
$(document).on("click","input[name=product]",function(){
product = $(this).val();
platform = $("input[name=platform]:checked").val();
submitValues(product,platform);
});
$(document).on("click","input[name=platform]",function(){
platform = $(this).val();
product = $("input[name=product]:checked").val();
submitValues(product,platform);
});下面是要调用的函数
function submitValues(product,platform){
if(product && platform){ // request.POST in case these 2 variables are defined
ajax({
type:"POST",
url:"/edit_view/",
data: {
product:product,
platform:platform,
csrfmiddlewaretoken:'{{ csrf_token }}',
},
success: function(){
$("#result").data($data);
}
});
}
}编辑：
您可以使用name更改HTML输入，这样就可以使用product_record = Product.objects.get(name=product)将对象放入视图
<input type="radio" name="product" value="{{ product.name }}"> {{ product }}<br>
<input type="radio" name="platform" value="{{ platform.name }}">或者将HTML输入保留为ID (value="{{ platform.id }}")，然后将视图中的查询更改为：
product_record = Product.objects.get(id=product)
platform_record = Platform.objects.get(id=platform)我建议第二个选项，因为ID是唯一的，而您的数据库中可能有相同的名称，这将以错误结束。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50750664
复制相关文章
相似问题