使用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(){})：在数据处理上比较多，多用于遍历数组。