ajax、序列化、批量数据、分页器、form组件
ajax、序列化、批量数据、分页器、form组件
ajax
ajax简介
Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。 使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户核心对象XMLHttpRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。
Ajax 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
ajax实操
简单来说，ajax提交数据页面不用刷新，原始数据还在，处理数据的过程中不影响页面其他操作
🌰：
# 选择一个标签，绑定触发事件
$('#btn').click(function () {
// 获取两个框里面的数据
let i1Val = $('#i1').val();
let i2Val = $('#i2').val();
// 发送ajax请求传输数据
$.ajax({
url:'', // 不写默认就是当前页面所在的地址
type:'post', // 指定当前请求方式
data:{'i1':i1Val,'i2':i2Val}, // 请求携带的数据
success:function (args) { // 异步回调函数 后端有回复自动触发
$('#i3').val(args)
}
})
})
前后端传输数据编码格式
请求体中会携带编码格式：Content-Type:
类如form表达默认发送的编码格式
Content-Type: application/x-www-form-urlencoded
数据格式:username=str&password=int
django后端会自动处理到:request.POST
form表单发送文件
Content-Type: multipart/form-data
数据格式：隐藏不让看
ajax默认的编码格式
Content-Type: application/x-www-form-urlencoded
数据格式:username=jason&password=123
django后端会自动处理到:request.POST
ajax发送json格式数据
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'name':'jason','pwd':123}),
contentType:'application/json', # 参数修改为json
success:function(args){
}
})
# django针对json格式的数据不会处理 直接在request.body
sweetalert前端插件
炫酷的前端弹窗效果
下载地址：https://github.com/lipis/bootstrap-sweetalert
使用展示:https://sweetalert.js.org/
django自带的序列化组件
主要作用于< Queryest >对象前端无法识别的情况，能将< Queryest >对象转为json格式传递给前端。
data_list = [] # [{}, {}, {}]
user_queryset = models.User.objects.all()
for user_obj in user_queryset:
data_list.append({
'pk':user_obj.pk,
'name':user_obj.name,
'age':user_obj.age,
'gender':user_obj.gender,
'gender_real':user_obj.get_gender_display(),
'addr':user_obj.addr
})
return JsonResponse(data_list,safe=False)
user_queryset = models.User.objects.all()
ret = serializers.serialize('json', user_queryset)
return HttpResponse(ret)
批量数据操作
每次IO操作都会占用cpu，假设现在需要将很多数据导入到数据库，逐条导入会严重浪费资源和效率
我们就可以用到批量插入
'''批量插入'''
book_list = []
for i in range(100000): # 模拟大量数据
# 先用类产生一个对象
source_book_obj = models.Books(title=f'第{i}本书')
# 将对象追加到列表中
book_list.append(source_book_obj) # 类似之前ATM购物车的菜篮子一样，保存临时数据成数据集一并写入
models.Books.objects.bulk_create(book_list) # 批量插入
book_queryset = models.Books.objects.all()
return render(request,'many_data.html',locals())
分页器推导流程
使用分页器功能，我们先推导到底需要那几个参数
- 页面展示数据条数 2. 数据库的数据最大条数 3. 用户当前需要看的页数
我们设1为X，2为Y，3为Z
根据all()的结果集是可以支持正数索引切片的，另外索引切片是顾头不顾尾需要注意
我们需要推算出当前页面展示的第一条和最后一条数据，然后使用结果集[第一条(-1):最后一条]-1是因为索引从0开始，最后一条不用操作因为索引不顾尾，数据数量刚刚好满足展示数据
0 10 10 20 20 30 X = 10
0 5 5 10 10 15 X = 5
0 2 2 4 4 6 X = 2
第一页 第二页 第三页
我们可以发现规律 [ XZ-X : XZ ],这个就是我们根据当前页面需要检索出来的数据
然后再根据0条和最大条数 限制住分页器的最小数和最大数。
if Z < 0: # 页数小于0，强制展示第一页
Z = 1
if Y%X != 0: # 最大页面为，最大条数用页面展示数取余，如不为0
Y//X + 1 # 最大页面整除条数 + 1
if Z > (Y//X + 1): # 如果页面大于该数,强制展示最后一也
Z = (Y//Z)
Forms组件
主要功能：
- 数据校验
- 标签渲染
- 展示信息
forms类中的所有字段数据默认都是必填的，额外传入的字段数据不会做任何校验，直接忽略
from django import forms # 导入forms模块
class MyForm(forms.Form):
# 用户名至少三个字符最多八个字符
username = forms.CharField(min_length=3,max_length=8)
# 年龄最小不能小于0 最大不能超过150
age = forms.IntegerField(min_value=0,max_value=150)
# 邮箱必须符合邮箱格式(@关键符号)
email = forms.EmailField()
数据校验
form_obj.is_valid() # 判断数据是否都满足 定义forms类的约束条件
全是则 True 否则为 False
form_obj.errors # 查看不符合条件的数据及原因
{'报错字段':['报错信息']}
form_obj.cleaned_data # 查看符合条件的数据
{'满足字段':'数据'}
渲染标签
渲染方式1:封装程度高 扩展性较差 主要用于快速生成页面测试功能
{{ form_obj.as_p }}
{{ form_obj.as_table }}
{{ form_obj.as_ul }}
渲染方式2:封装程度低 扩展性较好 但是字段比较多的情况下不方便
{{ form_obj.username.label }} # 文本提示
{{ form_obj.username }} # 获取用户数据的标签
渲染方式3:推荐使用!!! # 该方法直接想所有数据返回出去，根据forms的特性，超出的参数会被剔除
{% for form in form_obj %}
<p>
{{ form.label }}
{{ form }}
</p>
{% endfor %}
"""
forms组件只负责渲染获取用户数据的标签
form表单标签和提交按钮需要自己写
渲染标签中文提示 可以使用参数 label指定 不指定默认使用字段名首字母大写
"""
展示信息
forms中的校验安全性和级别完全不够
对于数据校验，我们必须交由后端代码去校验，不能指望前端forms
form表单可以取消浏览器自动添加校验功能的操作
<form action="" method="post" novalidate></form>
{{ form.errors.0 }}
提示信息可以自定义
username = forms.CharField(min_length=3,max_length=8,label='用户名',
error_messages={
'min_length':'用户名最短3位',
'max_length':'用户名最长8位',
'required':'用户名必填'
})
问题总结
程序员学习带来的逻辑分析能力，应该要让其惠及一生
浙公网安备 33010602011771号