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+Opencv识别两张相似图片
Mar 23 Python
python学生信息管理系统
Mar 13 Python
Django 连接sql server数据库的方法
Jun 30 Python
Python自定义装饰器原理与用法实例分析
Jul 16 Python
详解Python:面向对象编程
Apr 10 Python
Pandas之MultiIndex对象的示例详解
Jun 25 Python
python数组循环处理方法
Aug 26 Python
Pycharm中切换pytorch的环境和配置的教程详解
Mar 13 Python
keras自定义损失函数并且模型加载的写法介绍
Jun 15 Python
python3.x中安装web.py步骤方法
Jun 23 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
Nov 25 Python
利用django创建一个简易的博客网站的示例
Sep 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与javascript的两种交互方式
2006/10/09 PHP
php zend解密软件绿色版测试可用
2008/04/14 PHP
php判断变量类型常用方法
2012/04/24 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP生成及获取JSON文件的方法
2016/08/23 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
php实现二叉树中和为某一值的路径方法
2018/10/14 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
jquery创建一个ajax关键词数据搜索实现思路
2013/02/26 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
AngularJS 实现JavaScript 动画效果详解
2016/09/08 Javascript
清除输入框内的空格
2016/12/21 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
vue结合axios与后端进行ajax交互的方法
2018/07/06 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
详解NodeJs项目 CentOs linux服务器线上部署
2019/09/16 NodeJs
Element-Ui组件 NavMenu 导航菜单的具体使用
2019/10/24 Javascript
js+html实现点名系统功能
2019/11/05 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
2020/05/13 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
Python代码的打包与发布详解
2014/07/30 Python
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
跟老齐学Python之有容乃大的list(2)
2014/09/15 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
python获取响应某个字段值的3种实现方法
2020/04/30 Python
Python绘图之柱形图绘制详解
2020/07/28 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
高中教师考核方案
2014/05/18 职场文书
Python3.10的一些新特性原理分析
2021/09/15 Python
4种方法python批量修改替换列表中元素
2022/04/07 Python