django ForeignKey ManyToMany 前后端联动
总结
- 外键基本和普通的字段是一样的
- 多对多
- 获取 getlist()
- 更新 clear() add() remove()
- 前端和后端是通过字符串沟通的,所以使用ajax的时候如果是数据类型,记得要JSON转换
ForeignKey
后端处理
user_types = models.UserType.objects.all() # 在template 中使用
data_to_tpl["user_types"] = user_types
user_id = request.POST.get("id", None)
# print(type(request.POST.values()), request.POST.values())
to_update_dict = {}
to_update_dict["password"] = request.POST.get("password")
to_update_dict["phone"] = request.POST.get("phone")
to_update_dict["email"] = request.POST.get("email")
to_update_dict["user_type_id"] = request.POST.get("user_type_id")
front_hobbys = list(request.POST.getlist("hobbys")) # 获取select widget 的数据列表,如果使用get(), 那只会得到最后一个元素
print("---front_hobbys:", front_hobbys)
print("---to_update_dict", to_update_dict)
# update
models.UserInfo.objects.filter(pk=user_id).update(**to_update_dict)
user_obj = models.UserInfo.objects.get(pk=user_id)
user_obj.hobby.clear() # 多对多, 先清除,在添加
user_obj.hobby.add(*front_hobbys) # 多对多, 先清除,在添加
user_obj.save() # save to databases
模板
form 方式提交
模板语言动态生成:
<td>
<select name="user_type_id">
{% for user_type in user_types %}
{% if user.user_type_id == user_type %}
<option value={{ user_type.id }} selected="selected">{{ user_type.caption }}</option>
{% else %}
<option value={{ user_type.id }}>{{ user_type.caption }}</option>
{% endif %}
{% endfor %}
</select>
</td>
ajax 方式提交
这个简单,不写了
ManyToMany
后端处理
data_to_tpl["my_hobbys"] = user_obj.hobby.all() # 注意,这里一定要有一个all出来的才是 queryset类型的数据
all_hobbys = models.Hobby.objects.all() # 在template 中使用
data_to_tpl["all_hobbys"] = all_hobbys
# 取数据 更新
front_hobbys = list(request.POST.getlist("hobbys")) # 注意,这里一定是getlist()
user_obj = models.UserInfo.objects.get(pk=user_id)
user_obj.hobby.clear()
user_obj.hobby.add(*front_hobbys)
模板
form 方式提交
<tr>
<td>爱好</td>
<td>
<select name="hobbys" multiple="multiple" disabled="disabled" id="hobby_select">
{% for hobby in all_hobbys %}
{% if hobby in my_hobbys %}
<option value="{{ hobby.id }}" selected="selected">{{ hobby.title }}</option>
{% else %}
<option value="{{ hobby.id }}">{{ hobby.title }}</option>
{% endif %}
{% endfor %}
</select>
<a href="javascript:void(0)" onclick="deleteThisHobby(this)">编辑</a>
</td>
</tr>
ajax 方式提交
function uploadModifiedHobby(ths) {
var hobbys = $("#hobby_select").val();
hobbys_str = JSON.stringify(hobbys) // 要转换成字符串格式哦
console.log(hobbys_str)
$.ajax({
type:"POST",
url:"/chouti_like/delete_this_hobby/",
data:{"hobbys":hobbys_str,},
success:function (data) {
location.href = "/chouti_like/show_my_info/"
}
})
}
django ForeignKey ManyToMany 前后端联动的更多相关文章
- 【转】python+django+vue搭建前后端分离项目
https://www.cnblogs.com/zhixi/p/9996832.html 以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享 ...
- python+django+vue搭建前后端分离项目
以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享项目 准备工作:IDE,[JetBrains PyCharm2018][webpack 3 ...
- Django基础-04篇 Django开发前后端联动
1. 写views views.py代码块 1.在前端以/article/{{ article.id }}这种方式请求后台, 参数配置在urls.py中path('category/<int:i ...
- 全栈的自我修养: 001环境搭建 (使用Vue,Spring Boot,Flask,Django 完成Vue前后端分离开发)
全栈的自我修养: 环境搭建 Not all those who wander are lost. 彷徨者并非都迷失方向. Table of Contents @ 目录 前言 环境准备 nodejs v ...
- Django+element ui前后端不分离的博客程序
最近把去年写的一个烂尾博客(使用了django1.11和element ui)又重新完善了一下,修改了样式和增加了新功能 github链接:https://github.com/ngauerh/Nag ...
- 解决Django+Vue前后端分离的跨域问题及关闭csrf验证
前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道 在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...
- Django前后端分离跨域请求问题
一.问题背景 之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应 ...
- Django 前后端数据传输、ajax、分页器
返回ORM目录 Django ORM 内容目录: 一.MTV与MVC模式 二.多对多表三种创建方式 三.前后端传输数据 四.Ajax 五.批量插入数据 六.自定义分页器 一.MTV与MVC模式 M ...
- Django之META与前后端交互
Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...
随机推荐
- IIS 部署asp.net Core程序注意事项
Install the .NET Core Windows Server Hosting bundle Install the.NET Core Runtime 修改应用程序池的.net framew ...
- arm-linux-gcc
搭建交叉编译环境,即安装.配置交叉编译工具链.在Ubuntu环境下编译出嵌入式Linux系统所需的操作系统.应用程序等,然后再上传到目标机上. 交叉编译工具链是为了编译.链接.处理和调试跨平台体系结构 ...
- c语言修炼之一
1.C项目要高内聚(模块功能必须明确,一个模块完成一个功能).低耦合(接口尽可能简单,减少各模块间的联系). 2.register类型不能为模块间的全局变量.模块内的全局变量.局部static变量.( ...
- 粗略写了使用GD2制作文字图像demo
项目要求宽,高为传入参数:文字大小,文字间隔需要自动调节: 由于imagettftext()函数写入文字坐标点不以画布左上角为原点,而是根据文字的字体类型,字体大小,中英文,标点等因素变换(测试多组数 ...
- json_encode中文不转义问题
//php5.3之后才有这个参数,这样存入数据库中的中文json数据就不会转义,也能被正确解析1JSON_UNESCAPED_UNICODE(中文不转为unicode ,对应的数字 256) JSON ...
- [转] UML中的六大关系
UML中的六大关系 转自:https://www.cnblogs.com/hoojo/p/uml_design.html 在UML类图中,常见的有以下几种关系: 泛化(Generalization), ...
- SQL语句分类和语法
DQL:Data QueryLanguage 数据查询语言 作用: 查询表中的字段 命令: select 查询 ⑦select 查询列表①from 表1 别名②连接类型 joi ...
- layui之弹出层关闭和刷新问题
本篇文章是根据本人实际开发的例子来讲的,不一定适用各位看官的情况 描述: 主页面,弹出第一个弹框,第一个弹框中在弹出第二个弹框,如图: 1是主页面,2是子弹窗,3是孙弹窗 功能一:好了,第一个我要实现 ...
- 2.sleep和wait的区别:
sleep是Thread类的方法,wait是object(Java类库的老祖宗)的方法 sleep阻塞的线程在指定时间后,会转变为可执行状态:wait它要等待notify的唤醒 执行了sleep的线程 ...
- AcWing 831. KMP字符串
#include <iostream> using namespace std; , M = ; int n, m; int ne[N];//ne[i] : 以i为结尾的部分匹配的值 ch ...