说明

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

巴特西

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

说明

正文

最新文章

热门文章