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解析文件示例
Jan 23 Python
python获取一组数据里最大值max函数用法实例
May 26 Python
python实现图片变亮或者变暗的方法
Jun 01 Python
Python读写文件方法总结
Jun 09 Python
python使用json序列化datetime类型实例解析
Feb 11 Python
使用Python快速搭建HTTP服务和文件共享服务的实例讲解
Jun 04 Python
Python3+Appium实现多台移动设备操作的方法
Jul 05 Python
python中类的输出或类的实例输出为这种形式的原因
Aug 12 Python
Python将列表中的元素转化为数字并排序的示例
Dec 25 Python
使用Tensorflow实现可视化中间层和卷积层
Jan 24 Python
详解pandas获取Dataframe元素值的几种方法
Jun 14 Python
python index() 与 rindex() 方法的使用示例详解
Dec 24 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 stream_get_meta_data返回值
2013/09/29 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
JScript分割字符串示例代码
2013/09/04 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
Ubuntu中搭建Nodejs开发环境过程分享
2014/06/01 NodeJs
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
jQuery选择器源码解读(一):Sizzle方法
2015/03/31 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
微信小程序实现登录页云层漂浮的动画效果
2017/05/05 Javascript
解决BootStrap Fileinput手机图片上传显示旋转问题
2017/06/01 Javascript
深入浅析Vue不同场景下组件间的数据交流
2017/08/15 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
详解Vue单元测试case写法
2018/05/24 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
js操作table中tr的顺序实现上移下移一行的效果
2018/11/22 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
python中的yield使用方法
2014/02/11 Python
Python 实现简单的电话本功能
2015/08/09 Python
python正则表达式之作业计算器
2016/03/18 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
python如何生成各种随机分布图
2018/08/27 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
Python日志处理模块logging用法解析
2020/05/19 Python
HTML5 离线应用之打造零请求、无流量网站的解决方法
2013/04/25 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
2015年团队工作总结范文
2015/05/04 职场文书
2015秋季开学典礼新闻稿
2015/07/17 职场文书
预备党员入党感言
2015/08/01 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
Python+tkinter实现高清图片保存
2022/03/13 Python