Question

我猜这个代码中有多个错误 - 但我想弄清楚的主要是如何在满足条件时发送AJAX - 这是产品和平台变量的定义而不是null 。使用以下代码 - 我认为该行仅被评估一次。我不知道是否需要添加某种类型的监听器或者如何使用jQuery。我是jQuery的新手。如何调整我的代码，以便在定义平台和产品时发送POST？基本上我想要的是用户能够通过复选框和平台通过另一个复选框选择产品 - 如果满足这些条件，请发送带有这些参数的POST并在返回时接受查询结果。

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 views

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}))

Answer 1

正如您在上面的评论中提到的，要触发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是唯一的，而你的数据库中可能有相同的名称，最终会出错。

当定义了两个jquery变量时，如何通过AJAX发送POST？

1 个答案: