|
day57choices字段2Ajax异步提交即时刷新3contentType前后端编码格式4删除弹窗二次确认5自定义分页器
今日内容
0.今日内容
1 视频知识点:
2
3 知识点一 :
4 02 choices字段.mp4
5
6 知识点二:django框架简写
7 03 MTV与MVC模型.mp4
8
9 知识点三:ajax 是js中的计数,但是在js中比较繁琐,为了提高效率,所以这里采用jQuery封装版本的ajax
10 04 ajax基本语法结构.mp4
11
12 知识点四:contentType前后端传输数据编码格式
13 05 前后端传输数据编码格式.mp4
14 三大分类:1.urlencoded2.formdata 3.json
15 form 表单 可以修改为formdata传文件
16 1.符合urlencoded 放到request.POST中供用户获取
17 2.如果是文件 只要指定编码是formdata 就会自动解析放到 request.FILES中
18
19 知识点五:
20 06 ajax传文件.mp4
21 默认urlencoded ajax发送json格式数据,不会解析:而是原封不动放在request.body中
22
23 知识点五:
24 from django.core import serializers
25 # django自带的小型序列化工具
26 07 序列化组件.mp4
27
28 知识点六:sweetalert搭建页面
29 删除字段记录时,添加确认操作
30 08 ajax结合sweetalert插件使用.mp4
31
32 知识点七:自定义分页器
33 09 自定义分页器的使用.mp4
34
35 1.choices字段
36 2.MTV与MVC模型
37 3.Ajax
38 3.contentType前后端传输数据编码格式
39 4.sweetalert
40 5.自定义分页器
今日内容
?
1.choices字段
1 1.choices字段 choices参数(作为参数使用)
2 用户性别
3 用户学历
4 工作状态
5 客户来源
6 是否结婚
7 username gander
8 jason 1
9
10
11 models.py
12 """
13 from django.db import models
14
15 # Create your models here.
16 class User(models.Model):
17 username = models.CharField(max_length=32)
18 age = models.IntegerField()
19 choices = (
20 (1,‘男‘),(2,‘女‘),(3,‘其他‘)
21 )
22 # 性别
23 gender = models.IntegerField(choices=choices)
24 """
25 choice 语法介绍:
26 1.存choice 里面罗列的数字与中文对应关系
27 display 展示
28 print(user_obj.get_gender_display)
29 只要是choices字段 在获取数字对应的注释 固定语法 get_choices字段名_display()
30
31 2.存没有罗列迟来的数字 即 :不属于choices字段,没有对应关系的数字
32 不会报错 还是展示数字
33 """
34
35 class Book(models.Model):
36 title = models.CharField(max_length=32)
37 """
38
39 tests.py
40 """
41 user_obj = models.User.objects.filter(pk=2).first()
42 print(user_obj)
43 print(user_obj.get_gender_display()) # 男
44 """
45 只要choices字段 在获取数字对应的注释
46 固定语法: get_choices字段名_display()
47 """
48 """
choices
?
2.django 的MTV与MVC模型
1 MTV与MVC模型
2 django框架 自称MTV框架
3 M:models
4 T:templates
5 V:views
6 MVC
7 M:models
8 V:views
9 C:controller 控制器(urls)
10 本质:MTV其实也是MVC
django的MTV与MVC
?
3.Ajax 是原生js 使用的是封装好的jq 提速
1 3.Ajax(*********)
2 优点:异步提交,局部刷新
3 请求方式:
4 get post
5
6 a标签 href属性 get请求
7 浏览器窗口输入url get请求
8 form表单 get/post
9 ajax get/post
10 ps:
11 1.首先ajax这门技术 是js中的
12 2.但是原生js操作比较繁琐, 13 3.我们这里为了提高效率,直接使用jQuery封装版本的ajax
14
15 ajax最大的优点是:
16 在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容(这一特点给用户的感受是在不知不觉中完成和响应过程)
17
18 例:
19 页面上三个input框
20 在前两个input框中输入数字
21 点击按钮 发送ajax请求 不刷新页面的情况下
22 第三个框中自动算出两数之和
23 ajax语法(****)
24 $(‘#b1‘).on(‘click‘,function () {
25 {#alert(123)#}
26 //点击按钮 ‘求和‘朝后端发送post请求
27 //ajax最基础结构
28 $.ajax({
29 //控制发送给谁 不写就是朝当前地址提交
30 url:‘‘, 31 //发送post请求
32 type:‘post‘, 33 //发送数据
34 data:{‘i1‘:$(‘#i1‘).val(),‘i2‘:$(‘#i2‘).val()}, 35 success:function (data) {
36 //data形参用来接收异步提交的结果
37 {#alert(data)#}
38 {#//将后端计算好的结果 通过DOM操作渲染到第三个input框中#}
39 $(‘#i3‘).val(data)
40 }
41 })
42 })
43
44 完整案例:
45 index.html
46 <!DOCTYPE html>
47 <html lang="en">
48 <head>
49 <meta charset="UTF-8">
50 <title>index</title>
51 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
52 </head>
53 <body>
54 <input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
55 <button id="b1">求和</button>
56 <script>
57 $(‘#b1‘).on(‘click‘,function () {
58 {#alert(123)#}
59 //点击按钮 ‘求和‘朝后端发送post请求
60 //ajax最基础结构
61 $.ajax({
62 //控制发送给谁 不写就是朝当前地址提交
63 url:‘‘, 64 //发送post请求
65 type:‘post‘, 66 //发送数据
67 data:{‘i1‘:$(‘#i1‘).val(), 68 success:function (data) {
69 //data形参用来接收异步提交的结果
70 {#alert(data)#}
71 {#//将后端计算好的结果 通过DOM操作渲染到第三个input框中#}
72 $(‘#i3‘).val(data)
73 }
74 })
75 })
76 </script>
77 </body>
78 </html>
79
80 views.py
81 from django.shortcuts import render
82
83 # Create your views here.
84 """
85 ajax案例
86 """
87 from django.shortcuts import HttpResponse
88 def index(request):
89
90 # 判断 当前请求是否是ajax请求 get返回True post 返回False
91 print(request.is_ajax())
92 if request.is_ajax():
93 if request.method == ‘POST‘:
94 print(request.POST)
95 # 后端获取的前端数据都是字符串格式
96 i1 = request.POST.get(‘i1‘)
97 i2 = request.POST.get(‘i2‘)
98 res = int(i1) + int(i2)
99 return HttpResponse(res)
100 return render(request,‘index.html‘)
Ajax原生js,使用jq封装
?
3.ajax原理.png
4..contentType案例对比
1 1.urlencoded:
2 完整案例:
3 index.html
4 <!DOCTYPE html>
5 <html lang="en">
6 <head>
7 <meta charset="UTF-8">
8 <title>index</title>
9 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
10 </head>
11 <body>
12 <input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
13 <button id="b1">求和</button>
14 <script>
15 $(‘#b1‘).on(‘click‘,function () {
16 {#alert(123)#}
17 //点击按钮 ‘求和‘朝后端发送post请求
18 //ajax最基础结构
19 $.ajax({
20 //控制发送给谁 不写就是朝当前地址提交
21 url:‘‘, 22 //发送post请求
23 type:‘post‘, 24 //发送数据
25 data:{‘i1‘:$(‘#i1‘).val(), 26 success:function (data) {
27 //data形参用来接收异步提交的结果
28 {#alert(data)#}
29 {#//将后端计算好的结果 通过DOM操作渲染到第三个input框中#}
30 $(‘#i3‘).val(data)
31 }
32 })
33 })
34 </script>
35 </body>
36 </html>
37
38 views.py
39 from django.shortcuts import render
40
41 # Create your views here.
42 """
43 ajax案例
44 """
45 from django.shortcuts import HttpResponse
46 def index(request):
47
48 # 判断 当前请求是否是ajax请求 get返回True post 返回False
49 print(request.is_ajax())
50 if request.is_ajax():
51 if request.method == ‘POST‘:
52 print(request.POST)
53 # 后端获取的前端数据都是字符串格式
54 i1 = request.POST.get(‘i1‘)
55 i2 = request.POST.get(‘i2‘)
56 res = int(i1) + int(i2)
57 return HttpResponse(res)
58 return render(request,‘index.html‘)
59 2.formdata
60 index.html
61 <!DOCTYPE html>
62 <html lang="en">
63 <head>
64 <meta charset="UTF-8">
65 <title>index</title>
66 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
67 </head>
68 <body>
69 <form action="" method="post" enctype="multipart/form-data">
70 username:<input type="text" type="text" name="name">
71 password:<input type="text" name="pwd">
72 info: <input type="file" name="myfile">
73 <input type="submit">
74 </form>
75 </body>
76 </html>
77
78 view.py
79 """
80 ajax案例
81 """
82 from django.shortcuts import HttpResponse
83 def index(request):
84 """
85 切换为formdata 标识 index.html中采用form表单模式
86 <form action="" method="post" enctype="multipart/form-data">
87 """
88 # 验证前后端传输数据的编码格式
89 if request.method == ‘POST‘:
90 print(‘request.POST‘,request.POST)
91 print(‘request.FILES‘,request.FILES)
92 """
93 post 即:urlencoded
94 request.POST <QueryDict: {‘name‘: [‘llx‘],‘pwd‘: [‘123‘],‘myfile‘: [‘《Python Cookbook》第三版中文.pdf‘]}>
95 request.FILES <MultiValueDict: {}>
96 formdata: 即formdata 下 <form action="" method="post" enctype="multipart/form-data">
97 request.POST <QueryDict: {‘name‘: [‘llw‘],‘pwd‘: [‘123‘]}>
98 request.FILES <MultiValueDict: {‘myfile‘: [<TemporaryUploadedFile: 《Python Cookbook》第三版中文.pdf (application/pdf)>]}>
99 """
100 return render(request,‘index.html‘)
101
102 3.json
103 index.html
104 <!DOCTYPE html>
105 <html lang="en">
106 <head>
107 <meta charset="UTF-8">
108 <title>index</title>
109 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
110 </head>
111 <body>
112 <input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3">
113 <button id="b1">求和</button>
114 <script>
115 $(‘#b1‘).on(‘click‘,function () {
116 {#alert(123)#}
117 //点击按钮 ‘求和‘朝后端发送post请求
118 //ajax最基础结构
119 $.ajax({
120 //控制发送给谁 不写就是朝当前地址提交
121 url:‘‘,122 //发送post请求
123 type:‘post‘,124 //发送json数据
125 data:JSON.stringify({‘i1‘:$(‘#i1‘).val(),‘i2‘:$(‘#i2‘).val()}),126 //告诉后端你这次的发送的数据是json格式的
127 contentType:‘application/json‘,128 success:function (data) {
129 //data形参用来接收异步提交的结果
130 {#alert(data)#}
131 {#//将后端计算好的结果 通过DOM操作渲染到第三个input框中#}
132 $(‘#i3‘).val(data)
133 }
134 })
135 })
136 </script>
137 </body>
138 </html>
139
140 views.py
141 """
142 ajax案例
143 """
144 from django.shortcuts import HttpResponse
145 def index(request):
146 # 验证前后端传输数据的编码格式
147 if request.method == ‘POST‘:
148 print(‘request.POST‘,request.POST)
149 print(‘request.FILES‘,request.FILES)
150 print(request.body)
151 # json
152 """
153 //发送json数据
154 data:JSON.stringify({‘i1‘:$(‘#i1‘).val(),‘i2‘:$(‘#i2‘).val()}),155 //告诉后端你这次的发送的数据是json格式的
156 contentType:‘application/json‘,157 """
158 """
159 request.POST <QueryDict: {}>
160 request.FILES <MultiValueDict: {}>
161
162 在.request.body中 b‘{"i1":"1","i2":"2"}‘
163 """
164 # 后端需要自己手动去request.body中获取json 格式数据 自己处理
165 json_str = request.body
166 import json
167 s = json_str.decode(‘utf-8‘)
168 ral_d = json.loads(s)
169 print(ral_d,type(ral_d))
170 return render(request,‘index.html‘)
171
172 4.ajax 传文件
173
174 index.html
175 <!DOCTYPE html>
176 <html lang="en">
177 <head>
178 <meta charset="UTF-8">
179 <title>index</title>
180 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
181 </head>
182 <body>
183 <button id="b1">求和</button>
184 <input type="file" id="d1">
185 <script>
186
187 // ajax传输文件
188 $(‘#b1‘).on(‘click‘,function () {
189 //ajax传输文件 建议使用内置对象formdata
190 var formData = new FormData(); //即可以穿普通的键值对 也可以传文件
191 // 添加普通键值
192 formData.append(‘username‘,‘jason‘);
193 formData.append(‘password‘,‘123‘);
194 // 传文件
195 // 如何获取文件标签所存储的文件对象? 固定语法
196 // 1.先用jQery查找到存储文件的input标签
197 // 2.将jQuery对象转成原生js对象
198 // 3.利用原生js对象的方法 .files[0]获取到标签内部存储的文件对象
199 formData.append(‘my_file‘,$(‘#d1‘)[0].files[0]);
200 //ajax最基础结构
201 $.ajax({
202 //控制发送给谁 不写就是朝当前地址提交
203 url:‘‘,204 //发送post请求
205 type:‘post‘,206 //发送json数据
207 data:formData,208 // ajax 发送文件需要指定两个额外的参数
209 processData:false,//告诉前端不要处理数据
210 contentType:false,//不适用任何编码 因为 formdata 对象自身 自带编码,django后端也能够识别formdata对象
211 success:function (data) {
212 //data形参用来接收异步提交的结果
213 {#alert(data)#}
214 {#//将后端计算好的结果 通过DOM操作渲染到第三个input框中#}
215 $(‘#i3‘).val(data)
216 }
217 })
218 })
219 </script>
220 </body>
221 </html>
222
223 views.py
224 from django.shortcuts import render
225
226 # Create your views here.
227 """
228 ajax案例
229 """
230 from django.shortcuts import HttpResponse
231 def index(request):
232 ajax 传文件
233
234 request.POST <QueryDict: {‘username‘: [‘jason‘],‘password‘: [‘123‘]}>
235 request.FILES <MultiValueDict: {‘my_file‘: [<TemporaryUploadedFile: 《Python Cookbook》第三版中文.pdf (application/pdf)>]}>
236
237 """
238 return HttpResponse(‘OK‘)
239 return render(request,‘index.html‘)
4..contentType案例对比
?
4.contentType前后端传输数据编码格式
1 4.contentType前后端传输数据编码格式
2 三类:
3 1.urlencoded 默认使用的编码格式是urlencoded 数据格式:name=jason&pwd=123
4 2.formdata
5 3.json
6
7
8 1.form表单
9 --urlencoded
10 1.默认使用的编码格式是urlencoded
11 数据格式:name=jason&pwd=123
12 django 后端针对urlencoded编码格式的数据会自动解析并放到request.POST中供用户获取
13 --formdata
14 2.可以修改为formdata 传文件
15 1.django后端针对只要符合urlencoded编码格式的数据 (name=jason&pwd=123)都会自动解析并放到request.POST中供用户使用
16 2.如果是文件,只要你指定的编码是formdata就会自动解析并放到request.FILES中
17 总结:前后端传输数据的时候 一定要保证数据格式和你的编码格式是一致的不能骗人家
18
19 2.ajax提交数据
20 ajax默认数据提交方式也是urlencoded
21
22 ajax发送json格式数据
23 django 后端针对json格式的数据 并不会自动解析 放到request.POST或者request.FILES里面
24 他并不会解析到json 格式数据 而是将它原封不动的放在request.body中了
25 3.ajax 上传文件
26 传文件
27 如何获取文件标签所存储的文件对象 ?
28 固定语法:
29 1.先用jQuery查找到存储文件的input标签
30 2.将jQuery对象转成原生js对象
31 3.利用原生js对象方法 .file[0] 获取到标签内部存储的文件对象
32 4.一定要指定两个参数为false
4.contentType前后端传输数据编码格式
?
re
1
2 序列化组件
3
4 from django.core import serializers # django自带的一个小型的序列化工具
5 def reg(request):
6 user_list = models.User.objects.all()
7 res = serializers.serialize(‘json‘,user_list)
8 return render(request,‘index.html‘,locals())
9
10 [{
11 "model": "app01.user",12 "pk": 1,13 "fields": {
14 "username": "jason",15 "age": 18,16 "gender": 1
17 }
18 },{
19 "model": "app01.user",20 "pk": 2,21 "fields": {
22 "username": "tank",23 "age": 24,24 "gender": 3
25 }
26 },{
27 "model": "app01.user",28 "pk": 3,29 "fields": {
30 "username": "egon",31 "age": 73,32 "gender": 2
33 }
34 },{
35 "model": "app01.user",36 "pk": 7,37 "fields": {
38 "username": "kevin",39 "age": 29,40 "gender": 4
41 }
42 }]
43
44
45
46 sweetalert搭建页面
47
48 自定义分页器
49 1 bulk_create() 批量插入数据
50 # for i in range(1000):
51 # models.Book.objects.create(title=‘第%s本书‘%i)
52 # 上面这种方式 效率极低
53
54 l = []
55 for i in range(10000):
56 l.append(models.Book(title=‘第%s本书‘%i))
57 models.Book.objects.bulk_create(l) # 批量插入数据
58
59
60 自定义分页器的使用
61 后端代码
62 book_list = models.Book.objects.all()
63 current_page = request.GET.get("page",1)
64 all_count = book_list.count()
65 page_obj = Pagination(current_page=current_page,all_count=all_count,per_page_num=10,pager_count=5)
66 page_queryset = book_list[page_obj.start:page_obj.end]
67 前端代码
68 {% for book in page_queryset %}
69 <p>{{ book.title }}</p>
70 {% endfor %}
71 {{ page_obj.page_html|safe }}
72
73 多对多表关系 三种创建方式
re
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
