多对多三种创建方式
1.全自动(较为常用)
class Book(models.Model): title = models.CharField(max_length=32) authors = models.ManyToManyField(to='Author') # orm就会自动帮你创建第三张表 class Author(models.Model): name = models.CharField(max_length=32) ''' 好处：第三张表自己创建 不足之处：第三张表无法扩展额外的字段 '''
2.纯手动(了解)
class Book(models.Model): title = models.CharField(max_length=32) class Author(models.Model): name = models.CharField(max_length=32) class Book2Author(models.Model): book = models.ForeignKey(to='Book') author = models.ForeignKey(to='Author') create_time = models.DateField(auto_now_add=True) """ 好处在于第三表可以扩展额外的字段 不足之处:orm查询的时候会带来不便 """
3.半自动(推荐)
class Book(models.Model): title = models.CharField(max_length=32) authors = models.ManyToManyField(to='Author', through='Book2Author', through_fields=('book', 'author')) class Author(models.Model): name = models.CharField(max_length=32) books = models.ManyToManyField(to='Author', through='Book2Author', through_fields=('author', 'book')) class Book2Author(models.Model): book = models.ForeignKey(to='Book') author = models.ForeignKey(to='Author') create_time = models.DateField(auto_now_add=True) """ 好处在于第三步可以扩展任意的额外字段 还可以利用orm 正反向查询 不足之处:无法利用 add set remove clear 虽然无法使用了 但是你还可以自己直接操作第三表 """
Ajax（异步提交、局部刷新）
同步与异步
同步 任务提交之后原地等待任务的返回结果 进程表现上来说 阻塞
异步 任务提交之后不需要原地等待返回结果 直接执行下一行代码 继承表现上来说 非阻塞任务的结果肯定是需要的 是通过异步回调机制 callback()
与后端进行交互的方式
1.浏览器窗口输入url回车 GET
2.a标签href属性填写url点击 GET
3.form表单 GET/POST
4.Ajax GET/POST
Ajax并不是一门新的语言 它其实就是基于js写的一个功能模块而已
由于原生js书写ajax较为繁琐 所以我们直接学jQuery封装好的ajax模块操作
初识ajax
案例：页面上有三个input框 一个按钮
用户在前两个框中输入数字 点击按钮保证页面不刷新的情况下将数据发到后端做计算
将计算好的结果再发给前端展示到第三个input框中
ajax基本语法结构
// ajax基本语法
$.ajax({
// 1.到底朝哪个后端提交数据
url:'', // 控制数据的提交路径 有三种写法 跟form表单的action属性一致
// 2.指定当前请求方式
type:'post',
// 3.请求头设置
headers:{'Authorization':'JWT XXXX'}
// 4.提交的数据
data:{'i1':$('#i1').val(),'i2':$('#i2').val()},
// 5.ajax是异步提交 所以需要给一个回调函数来处理返回的结果
success:function (data) { // data就是异步提交的返回结果
// 将异步回调的结果通过DOM操作渲染到第三个input框中
$('#i3').val(data)
}
})
例：
templates/index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3"> <button id="d1">按钮</button> <script> $('#d1').click(function () { // 获取两个框里面内容 朝后端提交异步请求 // ajax基本语法 $.ajax({ // 1.到底朝那个后端提交数据 url:'', // 控制数据的提交路径 有三种写法 跟form表单的action属性一样 // 2.指定当前请求方式 type:'post', // 3.提交的数据 data:{'i1':$('#i1').val(),'i2':$('#i2').val()}, // 4.ajax是异步提交 所以需要给一个回调函数来处理返回的结果 success:function (data) { // data就是异步提交的返回结果 // 将异步回调的结果通过DOM操作渲染到第三个input框中 $('#i3').val(data) } }) }) </script> </body> </html>
app01/views.py
from django.shortcuts import render,HttpResponse def index(request): if request.method == 'POST': i1 = request.POST.get('i1') i2 = request.POST.get('i2') # i1 和 i2 是字符串类型 需要先做类型转换 i3 = int(i1) + int(i2) return HttpResponse(i3) return render(request,'index.html')
content-Type前后端传输数据的编码格式
urlencoded
formdata
application/json
form表单
默认是urlencoded编码格式传输数据
urlencoded数据格式
username=jason&password=123
django后端针对该格式的数据 会自动解析并帮你打包到request.POST中
formdata数据格式
django后端针对符合urlencoded编码格式数据(普通键值对)还是统一解析到request.POST中
而针对formdata文件数据就会自动解析放到request.FILES中
ajax提交
ajax默认的也是urlencoded编码格式
前后端数据交互 编码格式与数据格式一定要一致
application/json
django后端针对json格式数据 并不会做任何的处理
因为没有人拿，数据就以二进制的形式存放在request.body中
$('#d2').on('click',function () {
$.ajax({
rl:'',
type:'post',
// 修改content-Type参数
contentType:'application/json',
data:JSON.stringify({'username':'jason','password':123}), // 将数据序列化成json格式字符串
success:function (data) {
alert(data)
}
})
})
例：
templates/ab_ct.html
<button id="d2">ajax发送json格式数据</button> <script> $('#d2').on('click',function () { $.ajax({ url:'', type:'post', // 修改content-Type参数 contentType:'application/json', data:JSON.stringify({'username':'jason','password':123}), // 将数据序列化成JSON格式字符串 success:function (data) { alert(data) } }) }) </script>