Django开发中复选框用法示例


Posted in Python onMarch 20, 2018

本文实例讲述了Django开发中复选框用法。分享给大家供大家参考,具体如下:

一、查询数据库遍历所有的复选框

1、python查询数据库所有的tag

# 新增文章
def add(request):
  if request.method == 'GET':
    tags = TagModel.objects.all()
    return render(request, 'books_add.html', {'tags': tags})
  elif request.method == 'POST':
    title = request.POST.get('title', None)
    content = request.POST.get('content', None)
    blogModel = BlogModel(title=title, content=content, author=AuthorModel.objects.get(id=1))
    blogModel.save()
    # 获取复选框的值,是一个选中的数组
    tags = request.POST.getlist('tags')
    # 循环遍历所有选中的复选框,利用多对多的关系追加到数据库
    for tag in tags:
      blogModel.tag.add(tag)
    return HttpResponseRedirect('book_add')
  else:
    return HttpResponse(u'是不被处理的请求方式')

2、前端页面

<div class="form-group">
  <label class="col-sm-2 control-label">标签</label>
  <div class="col-sm-9">
    {% for tag in tags %}
      <label class="checkbox-inline">
        <input value="{{ tag.id }}" type="checkbox" name="tags"/>{{ tag.name }}
      </label>
    {% endfor %}
  </div>
</div>

3、进入编辑页面,先获取全部的复选框及选中的id

# 编辑博客
def edit(request, blog_id):
  tags = TagModel.objects.all()
  # 利用正向查找关于本博客选择的tag
  blogModel = BlogModel.objects.filter(id=blog_id).first()
  # 获取全部的tag
  check_tag = blogModel.tag.all()
  # 获取选中的id
  check_id = [int(x.id) for x in check_tag]
  print check_id
  return render(request, 'books_edit.html', {'tags': tags, 'check_id': check_id})

4、判断如果选中的就勾选

<div class="form-group">
  <label class="col-sm-2 control-label">标签</label>
  <div class="col-sm-9">
    {% for tag in tags %}
      {% if tag.id in check_id %}
        <label class="checkbox-inline">
          <input value="{{ tag.id }}" type="checkbox" name="tags" checked="checked"/>{{ tag.name }}
        </label>
      {% else %}
        <label class="checkbox-inline">
          <input value="{{ tag.id }}" type="checkbox" name="tags"/>{{ tag.name }}
        </label>
      {% endif %}
    {% endfor %}
  </div>
</div>

二、ajax提交的时候注意要把复选框转换字符串提交

1、前端代码

$('#btn').on('click', function (e) {
  // 设置空数组
  var hobby = [];
  $('#hobby-group').find('input[type=checkbox]').each(function () {
 if ($(this).prop("checked")) {
   var hobbyId = $(this).val();
   hobby.push(hobbyId);
 }
  })
  console.log(hobby);
  $.ajax({
 'url': '/ajaxpost/',
 'method': 'post',
 'data': {
   'username': $('.username').val(),
   'hobby': hobby
 },
 'traditional': true,
 'beforeSend': function (xhr, settings) {
   var csrftoken = ajaxpost.getCookie('csrftoken');
   //2.在header当中设置csrf_token的值
   xhr.setRequestHeader('X-CSRFToken', csrftoken);
 },
 'success': function (data) {
   console.log(data);
 }
  })
})

2、后端代码

@require_http_methods(['POST'])
def ajaxpost(request):
  form = LoginForm(request.POST)
  if form.is_valid():
    username = form.cleaned_data.get('username', None)
    # 获取复选框的值
    hobby = request.POST.getlist('hobby')
    print '*' * 100
    print hobby
    print '*' * 100
    return HttpResponse(u'成功')
  else:
    return HttpResponse(u'验证错误')

希望本文所述对大家Django框架的Python程序设计有所帮助。

Python 相关文章推荐
用Python设计一个经典小游戏
May 15 Python
python爬虫入门教程--利用requests构建知乎API(三)
May 25 Python
利用Python进行异常值分析实例代码
Dec 07 Python
详解python中的线程
Feb 10 Python
详解如何在python中读写和存储matlab的数据文件(*.mat)
Feb 24 Python
python 中的list和array的不同之处及转换问题
Mar 13 Python
如何在django里上传csv文件并进行入库处理的方法
Jan 02 Python
Django如何开发简单的查询接口详解
May 17 Python
python语言基本语句用法总结
Jun 11 Python
关于python的缩进规则的知识点详解
Jun 22 Python
详解Python的爬虫框架 Scrapy
Aug 03 Python
Python机器学习之底层实现KNN
Jun 20 Python
python如何通过twisted实现数据库异步插入
Mar 20 #Python
分分钟入门python语言
Mar 20 #Python
python使用生成器实现可迭代对象
Mar 20 #Python
浅谈Python中的作用域规则和闭包
Mar 20 #Python
python如何实现反向迭代
Mar 20 #Python
python利用高阶函数实现剪枝函数
Mar 20 #Python
python flask中静态文件的管理方法
Mar 20 #Python
You might like
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
php ajax 静态分页过程形式
2011/09/02 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
如何做到打开一个页面,过几分钟自动转到另一页面
2007/04/20 Javascript
javascript动画之圆形运动,环绕鼠标运动作小球
2010/07/20 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
2017/02/11 Javascript
详解Angular5 路由传参的3种方法
2018/04/28 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
Vue创建头部组件示例代码详解
2018/10/23 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
2019/06/12 Javascript
详解vue微信网页授权最终解决方案
2019/06/16 Javascript
python读取浮点数和读取文本文件示例
2014/05/06 Python
Python学习之asyncore模块用法实例教程
2014/09/29 Python
使用IPython来操作Docker容器的入门指引
2015/04/08 Python
解读Python中degrees()方法的使用
2015/05/18 Python
Python 数据库操作 SQLAlchemy的示例代码
2019/02/18 Python
python分布式计算dispy的使用详解
2019/12/22 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
成绩单家长评语大全
2014/04/16 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
交通安全标语
2014/06/06 职场文书
农村党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
Python超详细分步解析随机漫步
2022/03/17 Python
Oracle 多表查询基本语法实例
2022/04/18 Oracle