目录

说明

在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获取多选框用户选择的值问题的更多相关文章

  1. jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值

    做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...

  2. 《jquery权威指南2》学习笔记------ jquery获取复选框的值

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. asp.net在后台弹出confirm确认对话框并获取用户选择的值做出相应的操作

    在asp项目中,这种情况是经常出现的,前段时间通过查找资料以及自己尝试,找到一种解决方案,但是不知是否有更好的方案,以后发现再进行记录. 一.思路 在本次项目中,在一个函数中需要让用户判断,并根据用户 ...

  4. springMVC 复选框带有选择项记忆功能的处理

    前言:由于jsp管理页面经常会遇到复选框提交到JAVA后台,后台处理逻辑完成后又返回到jsp页面,此时需要记住jsp页面提交时复选框的选择状态,故编写此功能! 一.复选框的初始化 1.1.jsp页面 ...

  5. 复选框的全选+全不选+ajax传递复选框的value值+后台接受复选框默认值

    1.html代码 <!--全选框/全不选--> <input type="checkbox" name="all" id="all& ...

  6. jquery获取复选框checkbox的值

    jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的optio ...

  7. jQuery选取所有复选框被选中的值并用Ajax异步提交数据

    昨天和朋友做一个后台管理系统项目的时候涉及到复选框批量操作,如果用submit表单提交挺方便的,但是要实现用jQuery结合Ajax异步提交数据就有点麻烦了,因为我之前做过的项目中基本上没用Ajax来 ...

  8. jq 如何获取多选框选中的值

    jquery如何获取多选框选中的值,有两种方法 1.通过id获取是否选中(单个) 1)引入jquery文件 2)Html设计如下 <div> <span>运动类:</sp ...

  9. 折腾一天,获取下列多选框的所有选中值,原生js可直接通过obj.val()来获取,可jq不行,要通过循环取值来获取;

    折腾一天,获取下列多选框的所有选中值,原生js可直接通过obj.val()来获取,可jq不行,要通过循环取值来获取;

随机推荐

  1. class5_Radiobutton 选择按钮(选项选择)

    最终的运行效果图(程序见序号4) #!/usr/bin/env python# -*- coding:utf-8 -*-# -------------------------------------- ...

  2. 关于Mysql分区和分表

    [分区概念]分区就是把一张表的数据按照一定的规则分成多个区块,这些区块可以在同一个磁盘上,也可以在不同的磁盘上.分区后表还是一张表.分区根据一定的规则把数据文件和索引文件进行了分割,还多出了一个.pa ...

  3. 实现solr热词排行榜

    现在有业务场景,要求实现词库里面,最新,最热的词并显示,点击热词后可以进入相关信息的文章或者句子 热词的显示频率12小时更新一次. 实现思路: 实现步骤:

  4. Elasticsearch 搭建

    最近需要用到Elasticsearch.下面简单介绍下Elasticsearch的搭建过程: ElasticSearch 使用java编写, 所以需要安装 Java 6以上 环境来运行. 并且确保设置 ...

  5. jquery下拉框应用

    <!DOCTYPE html> <html lang="en"> <head> <script src="http://code ...

  6. 《转》python 12 列表解析

    转自 http://www.cnblogs.com/BeginMan/p/3164937.html 一.列表解析 列表解析来自函数式编程语言(haskell),语法如下: [expr for iter ...

  7. 【idea】设置console控制台显示内容大小

    Settings→Editor→General→Console 参考文章:https://blog.csdn.net/weixin_34363171/article/details/93444586

  8. iOS开发系列-Foundation与CoreFoundation内存管理

    概述 对于初学者来说,可能仅只能将ARC用在objective-c对象上(也即继承自NSObject的对象),但是如果涉及到较为底层的东西,比如Core Foundation中的malloc()或者f ...

  9. code+第四次网络赛div2

    T1 组合数问题: 用k个不完全相同的组合数表示一个数n. 用k-1个1和一个n-k+1表示即可. #include<cstdio> using namespace std; int x, ...

  10. leetcood学习笔记-53*-最大子列和

    题目描述: 方法一:O(N) class Solution(object): def maxSubArray(self, nums): sum = 0 max_sub_sum = nums[0] fo ...