choices字段、MTV和MVC字段、Ajax、前后端数据的编码格式、利用ajax传文件、序列化组件、ajax结合sweetalert的使用、分页器

Choices字段

 

 

取值:

 

MTVMVC模型

MTV

django框架 自称为是MTV框架

M:models

T:templates

V:views

MVC

M:models

V:views

C:controller 控制器(urls)

本质:MTV其实也是MVC

Ajax

特点:异步提交  局部刷新

请求方式        GET POST

a标签href属性      GET请求

浏览器窗口输入url            GET请求

form表单         GET/POST

ajax           GET/POST

简介:

首先ajax这门技术 是js中的

但是原生的js操作ajax比较繁琐,我们这里为了提高效率

直接使用jQuery封装版本的ajax

 AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

小练习

页面上有三个input

在前两个input框中输入数字

点击按钮 发送ajax请求 不刷新页面的情况下

第三个框中自动算出两数之和

 核心代码:

$('#b1').on('click',function () {

{#alert(123)#}

// 点击按钮 朝后端发送post请求

$.ajax({

url:'',  // 控制发送给谁 不写就是朝当前地址提交

type:'post',  // 发送方式是post请求

data:{'i1':$('#i1').val(),'i2':$('#i2').val()},  // 发送的数据

success:function (data) {  // data形参用来接收异步提交的结果

{#alert(data)#}

// 将后端计算好的结果 通过DOM操作 渲染到第三个input框中

$('#i3').val(data)

}

})

})

Ajax基础用法:

 

小实例:

 

 

前后端传输数据编码格式:

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

前后端传输数据编码格式

1.urlencoded

2.formdata

3.json

form表单

默认使用的编码格式是urlencoded

数据格式:name=jason&pwd=123

django后端针对urlencoded编码格式的数据会自动解析并放到request.POST中供用户获取

可以修改为formdata 传文件

django后端针对只要是符合urlencoded编码格式的数据(name=jason&pwd=123)都会自动解析并放到request.POST中供用户获取

如果是文件 只要你指定的编码是formdata 就会自动解析并放到request.FILES

总结:前后端传输数据的时候 一定要保证数据格式和你的编码格式是一致的(比如enctype默认的urlencoded而你上传了文件,就会放到request.post中)

ajax修改数据传输格式:

 

ajax提交数据

ajax默认数据提交方式也是urlencoded

ajax发送json格式数据

django后端针对json格式的数据 并不会自动解析放到request.POST或者request.FILES里面

它并不会解析json格式数据 而是将它原封不动的放在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形参用来接收异步提交的结果

alert(data)

// 将后端计算好的结果 通过DOM操作 渲染到第三个input框中

$('#i3').val(data)

}

})

// {)

ajax传输文件

 // ajax传输文件

$('#b1').on('click',function () {

// ajax传输文件 建议使用内置对象formdata

var formData = new FormData();  // 既可以传普通的键值对 也可以传文件

// 添加普通键值

formData.append('username','jason');

formData.append('password','123');

// 传文件

// 如何获取文件标签所存储的文件对象?  固定语法

// 1.先用jQery查找到存储文件的input标签

// 2.jQuery对象转成原生js对象

// 3.利用原生js对象的方法 .files[0]获取到标签内部存储的文件对象

// 4.一定要指定两个参数都为false

formData.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)

}

})

})

 

序列化组件:

from django.core import serializers  # django自带的一个小型的序列化工具

def reg(request):

user_list = models.User.objects.all()

res = serializers.serialize('json',user_list)

return render(request,'index.html',locals())

Res:

[{

"model": "app01.user",

"pk": 1,

"fields": {

"username": "jason",

"age": 18,

"gender": 1

}

}, {

"model": "app01.user",

"pk": 2,

"fields": {

"username": "tank",

"age": 24,

"gender": 3

}

}, {

"model": "app01.user",

"pk": 3,

"fields": {

"username": "egon",

"age": 73,

"gender": 2

}

}, {

"model": "app01.user",

"pk": 7,

"fields": {

"username": "kevin",

"age": 29,

"gender": 4

}

}]

 sweetalert搭建页面:

day 57中的实现!!!

自定义分页器的使用:

自定义分页器
        1 bulk_create()  批量插入数据
            # for i in range(1000):
            #     models.Book.objects.create(title='第%s本书'%i)
            # 上面这种方式 效率极低
            
            l = []
            for i in range(10000):
                l.append(models.Book(title='第%s本书'%i))
            models.Book.objects.bulk_create(l)  # 批量插入数据
    
    
    自定义分页器的使用
        后端代码
                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 }}
分页器

猜你喜欢

转载自www.cnblogs.com/yangjiaoshou/p/11575316.html