总结

  • 外键基本和普通的字段是一样的
  • 多对多
    • 获取 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 前后端联动的更多相关文章

  1. 【转】python+django+vue搭建前后端分离项目

    https://www.cnblogs.com/zhixi/p/9996832.html 以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享 ...

  2. python+django+vue搭建前后端分离项目

    以前一直是做基于PHP或JAVA的前后端分离开发,最近跟着python风搭建了一个基于django的前后端分享项目 准备工作:IDE,[JetBrains PyCharm2018][webpack 3 ...

  3. Django基础-04篇 Django开发前后端联动

    1. 写views views.py代码块 1.在前端以/article/{{ article.id }}这种方式请求后台, 参数配置在urls.py中path('category/<int:i ...

  4. 全栈的自我修养: 001环境搭建 (使用Vue,Spring Boot,Flask,Django 完成Vue前后端分离开发)

    全栈的自我修养: 环境搭建 Not all those who wander are lost. 彷徨者并非都迷失方向. Table of Contents @ 目录 前言 环境准备 nodejs v ...

  5. Django+element ui前后端不分离的博客程序

    最近把去年写的一个烂尾博客(使用了django1.11和element ui)又重新完善了一下,修改了样式和增加了新功能 github链接:https://github.com/ngauerh/Nag ...

  6. 解决Django+Vue前后端分离的跨域问题及关闭csrf验证

      前后端分离难免要接触到跨域问题,跨域的相关知识请参:跨域问题,解决之道   在Django和Vue前后端分离的时候也会遇到跨域的问题,因为刚刚接触Django还不太了解,今天花了好长的时间,查阅了 ...

  7. Django前后端分离跨域请求问题

    一.问题背景 之前使用django+vue进行前后端分离碰到跨域请求问题,跨域(域名或者端口不同)请求问题的本质是由于浏览器的同源策略导致的,当请求的响应不是处于同一个域名和端口下,浏览器不会接受响应 ...

  8. Django 前后端数据传输、ajax、分页器

    返回ORM目录 Django ORM 内容目录: 一.MTV与MVC模式 二.多对多表三种创建方式 三.前后端传输数据 四.Ajax ​ 五.批量插入数据 六.自定义分页器 一.MTV与MVC模式 M ...

  9. Django之META与前后端交互

    Django之META与前后端交互 1 提交表单之GET 前端提交数据与发送 1)提交表单数据 2)提交JSON数据 后端的数据接收与响应 1)接收GET请求数据 2)接收POST请求数据 3)响应请 ...

随机推荐

  1. c++踩坑大法好 赋值和指针的区别

    1,先说结论: 两个指针指向同一个结构,一个改了结构,另一个也会改掉. 两个指针指向同一个结构,修改了其中一个的指向,并且改了其中的内容,另一个不为所动. 2,看例子 main.cpp #includ ...

  2. 【HTML】三种方法使HTML单页面输入密码才能访问

    方法一 <script type="text/javascript"> function password() { var testV = 1; var pass1 = ...

  3. 使用validate进行表单验证时土方法(appendTo)改变error显示的位置

    <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...

  4. Python获取最新电影的信息

    这次将从电影天堂获取最新的电影的详细信息,这里电影的信息罗列的比较详细. 本来只是想获取电影的迅雷链接,然后用迅雷去下载.但看到这里的电影的信息比较完整和详细,忍不住把所有信息都爬取下来了. 下图是& ...

  5. cmd命令和快捷键

    命令 含义 盘名: 从C盘到其他盘时输入 dir 查看当前文件夹下的内容 cd 目录名称 选择目录 cd.. 退回当前目录的上一级目录 cd\ 回到根目录 md 目录名称 创建目录 rd 目录名称 删 ...

  6. C#常见几种集合比较

    1. ArrayList 1.1 ArrayList是一个特殊数组,通过添加和删除元素就可以动态改变数组的长度. ArrayList集合相对于数组的优点:支持自动改变大小,可以灵活的插入元素,可以灵活 ...

  7. Mysql5.6基础命令

    Centos7下mysql5.6数据库的操作 Mysql如何修改密码? 1.使用mysqladmin修改,这种修改方式需要知道mysql的原始密码 修改密码后我们测试下看看能不能登录成功 怎么才能不需 ...

  8. BeautifulReport报告

    Project description BeautifulReport 一个基于unittest.TestResult模块实现的测试用例模板, 可把测试中的结果通过BeautifulReport整合成 ...

  9. PHP Apache/Nginx/IIS等各环境下的伪静态配置

    一.Apache的伪静态配置 1.网站根目录下需要有 .htaccess 文件,没有则自己创建一个,内容如下: <IfModule mod_rewrite.c> RewriteEngine ...

  10. 题解【Codeforces438D】The Child and Sequence

    题目描述 At the children's day, the child came to Picks's house, and messed his house up. Picks was angr ...