javascript - 即使在ajax提交后，jquery中的数组仍保留旧数据

Question

我有一个品牌和类别列表。一个品牌可以有多个类别。

{% for brand in brands %}
    <li><input type="radio" value="{{brand.title}}" name="brand">{{brand.title}}</li>
{% endfor %}

{% for category in categories %}
    <li><input type="checkbox" value="{{category.title}}" name="category" > {{category.title}}</li>
{% endfor %}

<input type="submit" value="submit" id="brand_category">

<script>
 var parameter = [];
  var brand = [];
  var category = [];

    $('#brand_category').click(function(event) {
        $("input:checkbox[name=category]:checked").each(function(){
            if ($(this).prop("checked", true)) {
                category.push($(this).val())
            }
        });
        parameter.push({
            brand :   $("input[type='radio']:checked").val(),
            category: category
        })
        var json = JSON.stringify(parameter);

        $.ajax({        
            type: "post",
            url: "{% url 'seller_details' %}",
            data: { 
                'parameter[]' : json , 
                csrfmiddlewaretoken: '{{csrf_token}}'
            },
            contentType: 'application/json; charset=utf-8',
            dataType:"json",
            success: function(data) {
                $('#loading-image').hide();
            },
            error: function(response, error) { }
        });
    });

</script>

我尝试从上面的脚本发送品牌和类别，但它保留了数组品牌、类别和参数中的旧数据。对于上述场景，这是发送数据的正确方法吗？

Answer 1

听起来您是在点击处理程序之外定义了 category 数组，并且您没有在点击之间清除它的值。另请注意，each block 中的 if 语句是多余的，因为选择器仅检索已检查的元素。

要解决此问题，您可以更改代码，以便在处理程序内定义数组:

$('#brand_category').click(function(event) {
    var category = [];
    $("input:checkbox[name=category]:checked").each(function(){
        category.push($(this).val());
    });

    // rest of your code...
});

或者，您可以在每次点击时从头开始生成数组:

var category = [];
$('#brand_category').click(function(event) {
    category = $("input:checkbox[name=category]:checked").map(function() {
        return this.value;
    }).get();

    // rest of your code...
});