Django的Ajax加额外操作

---恢复内容开始---

choice参数

这个参数能够帮我们在数据库中存储数字，然后取出的时候，可以将其转换成相对应的字符，为什么这样呢，因为数字的存储所占的空间远小于字符的，这样能够节省资源。

用法:

class User(models.Model):username = models.CharField(max_length=32)age = models.IntegerField()choices = ((1,'男'),(2,'女'),(3,'其他'))gender = models.IntegerField(choices=choices)"""1 存choice里面罗列的数字与中文对应关系print(user_obj.get_gender_display())只要是choices字段 在获取数字对应的注释 固定语法get_choices字段名_display()2 存没有罗列迟来的数字不会报错 还是展示数字"""

MTV与MVC模型

这两个是个概念

MTV：M：models模型层，T：template模板层，V：views视图层

MVC：M：models模型层，V：views视图层，C：controller控制层，url层

本质：MVC本质上也是MTV模型

AJAX:

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX不是新的编程语言，而是一种使用现有标准的新方法。

特点：异步提交，局部刷新。

其来源于javascript中的。

最大的优点是在不刷新整个页面的情况下，完成前后端数据的交互。

（这一点给用户的感觉是不知不觉中完成的）

其写法也挺固定的：

下面一个例子：

页面上有三个input框
在前两个input框中输入数字
点击按钮 发送ajax请求 不刷新页面的情况下
第三个框中自动算出两数之和
$('#b1').on('click',function () {{#alert(123)#}// 点击按钮 朝后端发送post请求下面就是基础语法，$.ajax括号内再放一个花括号$.ajax({url:'',  //控制数据提交的目的地，和form表单的action一样，不填默认都是当前路径，可以写后缀，或全路径type:'post',  //提交的方式data:{'i1':$('#i1').val(),'i2':$('#i2').val()},  // 发送的数据success:function (data) {  // data形参接收的就是异步提交{#alert(data)#}// 将后端计算好的结果 通过DOM操作 渲染到第三个input矿中$('#i3').val(data)}})})

contentType前后端传输数据的编码格式

　　urlencoded

　　formdata

　　json

form表单默认编码格式是urlencoded,前端的格式是什么=什么多个用&隔开，后端的话，会自动并解析放入request.POST中

formdata:django争对urlencoded编码格式的数据都会放入request.POST中，而文件则是会自动解析并放入到request.Files中，也就是说，formdata既支持传键对值，也支持传文件，后端获取，键对值还是POST,而文则是Files.

注意点:前后端传输数据，数据以什么格式发送的，就要以什么格式去接收，即数据格式要和编码格式要相等

ajax发送json格式的数据

django后端针对json格式的数据，不会自动解析放入到POST中或Files中，而是原封不动的放入到request.body中，里面全部是二进制字符串，需要我们自己解码和反序列化。

$('#b1').on('click',function () {alert(123)// 点击按钮 朝后端发送post请求$.ajax({url:'',  // 控制发送给谁 不写就是朝当前地址提交type:'post',  // 发送方式是post请求data:JSON.stringify({'username':'jason','password':123}),  // 发送的数据contentType:'application/json',  // 告诉后端你这次的数据是json格式success:function (data) {  // data形参用来接收异步提交的结果}})

$('#b1').on('click',function () {alert(123)// 点击按钮 朝后端发送post请求$.ajax({url:'',  // 控制发送给谁 不写就是朝当前地址提交type:'post',  // 发送方式是post请求data:JSON.stringify({'username':'jason','password':123}),  // 发送的数据contentType:'application/json',  // 告诉后端你这次的数据是json格式success:function (data) {  // data形参用来接收异步提交的结果}})

后端获取

def index(request):# print(request.POST)# print(request.FILES)if request.method == 'POST':print(request.POST)print(request.FILES)# print(request.body)# import json# data = request.body# res1 = data.decode('utf-8')# print(res1, type(res1))# res2 = str(data,encoding='utf-8')# print(res2,type(res2))# res3 = json.loads(res2)# print(res3,type(res3))

AJAX传输文件

ajax传输要借助于FormData这个内置对象

// ajax传输文件 建议使用内置对象formdata$('#b1').on('click',function () {var formData = new FormData();  // 既可以传普通的键值对 也可以传文件// 添加普通键值formData.append('username','jason');formData.append('password','123');// 传文件// 如何获取文件标签所存储的文件对象?  固定语法// 1.先用jQ象转ery查找到存储文件的input标签// 2.将jQuery对成原生js对象// 3.利用原生js对象的方法 .files[0]获取到标签内部存储的文件对象// 4.一定要指定两个参数都为falseformData.append('my_file',$('#d1')[0].files[0]);$.ajax({url:'',  // 控制发送给谁 不写就是朝当前地址提交type:'post',  // 发送方式是post请求data:formData, // 发送的数据// ajax发送文件需要指定两个额外的参数processData:false,  // 告诉前端不要处理数据contentType:false,  // 不适用任何编码  因为formdata对象自身自带编码 django后端也能够识别formdata对象success:function (data) {  // data形参用来接收异步提交的结果{#alert(data)#}// 将后端计算好的结果 通过DOM操作 渲染到第三个input矿中$('#i3').val(data)}})})

序列化组件

这个用到了django自带的一个小组件(serializers)

使用：

from django.core import serializersdef reg(request):user_List = models.User.object.all()//这个是查询所有res = serializers.serializer('json',user_List)第一个个参数是要序列化的格式，第二个参数是要序列化的数据return render(request,'index.html,locals())

sweetalert(弹窗）

点击下载Bootstrap-sweetalert项目。

$("#b55").click(function () {swal({title: "你确定要删除吗？",text: "删除可就找不回来了哦！",type: "warning",showCancelButton: true,  // 是否显示取消按钮confirmButtonClass: "btn-danger",  // 确认按钮的样式类confirmButtonText: "删除",  // 确认按钮文本cancelButtonText: "取消",  // 取消按钮文本closeOnConfirm: false,  // 点击确认按钮不关闭弹框showLoaderOnConfirm: true  // 显示正在删除的动画效果},function () {var deleteId = 2;$.ajax({url: "/delete_book/",type: "post",data: {"id": deleteId},success: function (data) {if (data.code === 0) {swal("删除成功!", "你可以准备跑路了！", "success");} else {swal("删除失败", "你可以再尝试一下！", "error")}}})});})

批量操作（bulk_create)

场景要插入1000条数据也就是多条数据的时候，这个时候就要用到bulk_create了

def reg(request):一种:for i in range(1000):models.Book.objects.create(name=i)这个是一次for循环我就要去操作数据库效率低到你想砸电脑正确ls = []for i in range(1000）:ls.append(models.Book(name=i))//这个我只是加对象，并没有去操作数据库models.Book.objects.bulk_create(ls)这个效率高
就一个关键字bulk_create

分页器

class Pagination(object):def __init__(self,current_page,all_count,per_page_num=2,pager_count=11):"""封装分页相关数据:param current_page: 当前页:param all_count:    数据库中的数据总条数:param per_page_num: 每页显示的数据条数:param pager_count:  最多显示的页码个数用法:queryset = model.objects.all()page_obj = Pagination(current_page,all_count)page_data = queryset[page_obj.start:page_obj.end]获取数据用page_data而不再使用原始的queryset获取前端分页样式用page_obj.page_html"""try:current_page = int(current_page)except Exception as e:current_page = 1if current_page <1:current_page = 1self.current_page = current_pageself.all_count = all_countself.per_page_num = per_page_num# 总页码all_pager, tmp = divmod(all_count, per_page_num)if tmp:all_pager += 1self.all_pager = all_pagerself.pager_count = pager_countself.pager_count_half = int((pager_count - 1) / 2)@propertydef start(self):return (self.current_page - 1) * self.per_page_num@propertydef end(self):return self.current_page * self.per_page_numdef page_html(self):# 如果总页码 < 11个：if self.all_pager <= self.pager_count:pager_start = 1pager_end = self.all_pager + 1# 总页码  > 11else:# 当前页如果<=页面上最多显示11/2个页码if self.current_page <= self.pager_count_half:pager_start = 1pager_end = self.pager_count + 1# 当前页大于5else:# 页码翻到最后if (self.current_page + self.pager_count_half) > self.all_pager:pager_end = self.all_pager + 1pager_start = self.all_pager - self.pager_count + 1else:pager_start = self.current_page - self.pager_count_halfpager_end = self.current_page + self.pager_count_half + 1page_html_list = []# 添加前面的nav和ul标签page_html_list.append('''<nav aria-label='Page navigation>'<ul class='pagination'>''')first_page = '<li><a href="?page=%s">首页</a></li>' % (1)page_html_list.append(first_page)if self.current_page <= 1:prev_page = '<li class="disabled"><a href="#">上一页</a></li>'else:prev_page = '<li><a href="?page=%s">上一页</a></li>' % (self.current_page - 1,)page_html_list.append(prev_page)for i in range(pager_start, pager_end):if i == self.current_page:temp = '<li class="active"><a href="?page=%s">%s</a></li>' % (i, i,)else:temp = '<li><a href="?page=%s">%s</a></li>' % (i, i,)page_html_list.append(temp)if self.current_page >= self.all_pager:next_page = '<li class="disabled"><a href="#">下一页</a></li>'else:next_page = '<li><a href="?page=%s">下一页</a></li>' % (self.current_page + 1,)page_html_list.append(next_page)last_page = '<li><a href="?page=%s">尾页</a></li>' % (self.all_pager,)page_html_list.append(last_page)# 尾部添加标签page_html_list.append('''</nav></ul>''')return ''.join(page_html_list)

使用:
后端代码:

book_list = models.Book.objects.all()
current_page = request.GET.get("page",1)
all_count = book_list.count()
page_obj=Pagination(current_page=current_page,all_count=all_count,per_page_num=10,pager_count=5)
page_queryset = book_list[page_obj.start:page_obj.end]

前端代码

    {% for book in page_queryset %}<p>{{ book.title }}</p>{% endfor %}{{ page_obj.page_html|safe }}

转载于:https://www.cnblogs.com/xinfan1/p/11574275.html