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二分查找详解
Sep 13 Python
Python如何实现文本转语音
Aug 08 Python
利用 Monkey 命令操作屏幕快速滑动
Dec 07 Python
python使用SMTP发送qq或sina邮件
Oct 21 Python
对python-3-print重定向输出的几种方法总结
May 11 Python
Python实现打砖块小游戏代码实例
May 18 Python
Ubuntu18.04下python版本完美切换的解决方法
Jun 14 Python
python读取ini配置的类封装代码实例
Jan 08 Python
Python2与Python3的区别详解
Feb 09 Python
Python实现井字棋小游戏
Mar 09 Python
pandas map(),apply(),applymap()区别解析
Feb 24 Python
5行Python代码实现一键批量扣图
Jun 29 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 生成随机验证码图片代码
2010/02/08 PHP
php 输出双引号&quot;与单引号'的方法
2010/05/09 PHP
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
php中引用符号(&amp;)的使用详细介绍
2016/12/06 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
2015/09/07 Javascript
js带前后翻页的图片切换效果代码分享
2015/09/08 Javascript
详解页面滚动值scrollTop在FireFox与Chrome浏览器间的兼容问题
2015/12/03 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
2016/05/21 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
Nodejs连接mysql并实现增、删、改、查操作的方法详解
2018/01/04 NodeJs
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
js中数组常用方法总结(推荐)
2019/04/09 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
JS模拟实现京东快递单号查询
2020/11/30 Javascript
Python中的 is 和 == 以及字符串驻留机制详解
2019/06/28 Python
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
亚马逊巴西站:Amazon.com.br
2019/09/22 全球购物
.net软件工程师面试题
2015/03/31 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
英文版销售经理个人求职信
2013/11/20 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
宣传标语大全
2014/07/01 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
2015小学语文教师个人工作总结
2015/05/20 职场文书
子女赡养老人协议书
2016/03/23 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python