使用Ajax获取多选框用户选择的值问题

说明
正文

说明

在web开发过程中，将多选框的值提交到django后台，有两种提交方式：

form表单提交
ajax异步提交

我需要使用ajax将复选框的值提交到后台，记录一下当时碰到的问题

正文

前端接收到一个标签列表的queryset对象，在前端渲染出来复选框

复选框代码：

Tag标签:
{% for tags in tags_list %}
	<input type="checkbox" name="tags" id="{{ tags.pk }}" value="{{ tags.name }}">{{ tags.name }}&nbsp;
{% endfor %}

如何将用户选择的多选框获取到，一起提交到后台？

可以采取下面的方式:

$(selector).each(function(){})

var tags = [];
$("input[name=\'tags\']:checked").each(function (i) {
    {#    tags[i] = $(this).attr(\'id\')#}
    tags.push($(this).attr(\'id\'))
    });

selector：属性选择器
:checked：专门针对于表单筛选器
().each()：遍历每个jQuery对象，为每个匹配的元素执行函数。

利用ajax请求将数据发送到后端

$.ajax({
    url: \'\',
    type: \'post\',
    data: {
        \'csrfmiddlewaretoken\': \'{{ csrf_token }}\',
        \'content\': Content,
        \'title\': Title,
        \'tags\': JSON.stringify(tags),
        \'catepory\': $("input[name=\'catepory\']:checked").val(),
}

对于想要前端传自定义对象数组到后端，可以有两种方式，一种使用默认的urlencoded，另一种使用json

对于想要前端传自定义对象数组到后端，
ajax请求中设置contentType:"application/json;"
ajax请求中设置data:JSON.stringify(tags)

后端接收

if request.is_ajax():
    if request.method == "POST":
        tags = request.POST.get(\'tags\')
        print(tags,type(tags))

注意后端get接收到的是一个字符串形式的容器类型的数据，可以使用eval内置函数将字符串的引号去掉，变为原有的应该的有的数据类型

tags = eval(tags)
print(tags,type(tags))

讲到这里，想起来jQuery中的两个方法：

$(selector).each(function(){})：在DOM操作上比较多，多用于遍历对象。
$.each(obj,function(){})：在数据处理上比较多，多用于遍历数组。