使用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(){})：在數據處理上比較多，多用於遍歷數組。