ajax 传数据视频,Django知识整理四(choices参数,MTV与MVC模型,ajax介绍,ajax传json文件,ajax传文件,contentType前后端传输数据编码格式)...

choices参数

在表格中些字段只有一些固定的字段名，比如

用户的性别(男 女)

用户的学历(大专,本科,博士,硕士)

用户的工作状态(消极,积极)

客户来源

。。。

# 代码展示

class Userinfo(models.Model):

username = models.CharField(max_length=32)

password = models.IntegerField(default=123)

choices = (

(1,'male'),

(2,'female'),

(3,'others')

)

gender = models.IntegerField(choices=choices)

# 针对choices字段 如果你想要通过输入数字获得所对应的中文 你不能直接点字段

# 固定句式 数据对象.get_字段名_display() 当没有对应关系的时候 该句式获取到的还是数字

# gender存的是数字 如果数字在上面的对应关系中 那么在取值的时候 可以通过

user_obj.gender # 数字

user_obj.get_gender_display() # 取到的就是数字对应的解释

# 如果存的数字不在范围内 拿到的还是数字本身

例题:

record_choices = (('checked', "已签到"),

('vacate', "请假"),

('late', "迟到"),

('noshow', "缺勤"),

('leave_early', "早退"),

)

record = models.CharField("上课纪录", choices=record_choices, default="checked",

score_choices = ((100, 'A+'),

(90, 'A'),

(85, 'B+'),

(80, 'B'),

(70, 'B-'),

(60, 'C+'),

(50, 'C'),

(40, 'C-'),

(0, ' D'),

(-1, 'N/A'),

(-100, 'COPY'),

(-1000, 'FAIL'),

)

score = models.IntegerField("本节成绩", choices=score_choices, default=-1)

MTV与MVC模型

本质: MTV框架,其实它还是MVC框架

MTV:

M:models

T:templates

V:views

MVC：

M：models

V: views

C: contronner(路由匹配)

ajax

异步提交

同步异步：描述的任务的提交方式

同步:提交任务之后 原地等待任务的返回结果 期间不干任何事儿

异步:提交任务之后 不愿地等待 直接执行下一行代码 任务的返回通过回调机制

阻塞非阻塞：程序的运行状态

程序运行的三状态图

局部刷新

一个页面 不是整体刷新 而是页面的某个地方局部刷新

ajax基层与优点

我们所学的ajax是基于jQuery封装好简易版本所以你在写ajax的时候一定要确保导入可jQuery

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

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

有关ajax优点的小例子

# 需求:

展示一个前端页面 页面上有三个输入框 前两个框输入数字 点击按钮朝后端发请求页面不刷新的情况下 完成数字的加法运算

# 部分代码展示

+ =

计算

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

// 朝后端提交post数据

$.ajax({

// 1.到底朝后端哪个地址发数据

url:'', // 专门用来控制朝后端提交数据的地址 不写默认就是朝当前地址提交

// 2.到底发送什么请求

type:'post', // 专门制定ajax发送的请求方式

// 3.发送的数据到底是什么

data:{'t1':$('#t1').val(),'t2':$('#t2').val()},

// 4.异步提交的任务 需要通过回调函数来处理

success:function (data) { // data形参指代的就是异步提交的返回结果

// 通过DOM操作将内容 渲染到标签内容上

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

}

})

})

ajax传json数据

django后端针对json格式的数据 不会自动帮你解析 会直接原封不动的给你放到request.body中

你可以手动处理 获取数据

json_bytes = request.body

json_str = str(json_bytes,encoding='utf-8')

json_dict = json.loads(json_str)

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

// 朝后端提交post数据

$.ajax({

// 1.到底朝后端哪个地址发数据

url:'', // 专门用来控制朝后端提交数据的地址 不写默认就是朝当前地址提交

// 2.到底发送什么请求

type:'post', // 专门制定ajax发送的请求方式

// 告诉后端你当前的数据格式 到底是什么类型

contentType:'application/json',

// 3.发送的数据到底是什么

{#data:{'t1':$('#t1').val(),'t2':$('#t2').val()},#}

data:JSON.stringify({'username':'jason','password':'123'}),

// 4.异步提交的任务 需要通过回调函数来处理

success:function (data) { // data形参指代的就是异步提交的返回结果

// 通过DOM操作将内容 渲染到标签内容上

{#$('#t3').val(data)#}

alert(data)

}

})

})

# 注意点

1.指定contentType参数

contentType:'application/json',

2.要将你发送的数据 确保是json格式的

data:JSON.stringify({'username':'jason','password':'123'})

ajax传文件

需要利用内置对象 Formdata

该对象既可以传普通的键值 也可以传文件

# 获取input获取用户上传文件的文件的内容

// 1.先通过jquery查找到该标签

// 2.将jquery对象转换成原生的js对象

// 3.利用原生js对象的方法 直接获取文件内容

$('#t3')[0].files[0]

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

// 1.先生成一个formdata对象

var myFormData = new FormData();

// 2.朝对象中添加普通的键值

myFormData.append('username',$("#t1").val());

myFormData.append('password',$("#t2").val());

// 3.朝对象中添加文件数据

// 1.先通过jquery查找到该标签

// 2.将jquery对象转换成原生的js对象

// 3.利用原生js对象的方法 直接获取文件内容

myFormData.append('myfile',$('#t3')[0].files[0]);

$.ajax({

url:'',

type:'post',

data:myFormData, // 直接丢对象

// ajax传文件 一定要指定两个关键性的参数

contentType:false, // 不用任何编码 因为formdata对象自带编码 django能够识别该对象

processData:false, // 告诉浏览器不要处理我的数据 直接发就行

success:function (data) {

alert(data)

}

})

})

"""

ajax传文件需要注意的事项

1.利用formdata对象 能够简单的快速传输数据 (普通键值 + 文件)

2.有几个参数

data:formdata对象

contentType:false

processData:false

"""

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

编码格式种类

1.urlencoded

2.formdata

3.application/json

form表单

form表单默认的编码格式是urlencoded

urlencoded编码格式的数据特点

username=jason&password=123&age=18

# django后端针对符合urlencoded数据格式 会自动解析 并给你封装到request.POST中

# 你可以通过制定enctype参数来修改form表单提交数据的编码格式

# form表单传输文件的时候 编码格式就必须有默认的改为formdata

"""

即可以传普通的键值对也可以上传文件

django后端针对只要是符合urlencoded格式的数据都会自动解析放到request.POST

针对文件数据 会解析并放到request.FILES

"""

ajax 默认的数据编码格式也是urlencoded

也就意味着ajax发送post请求django后端默认也是通过request.POST获取数据

前后端在做数据交互的时候 一定一定要表明你所发的的数据到底是什么格式

前段后交互 你不能骗人家

你的数据时什么格式 你就应该准确无误告诉别人是什么格式

序列化组件

1.将用户表的数据 查询出来 返回给前端

给前端的是一个大字典 字典里面的数据的一个个的字段

from django.core import serializers

def ser(request):

user_queryset = models.Userinfo.objects.all()

# [{},{},{},{}]

# user_list = []

# for user_obj in user_queryset:

# user_list.append({

# 'username':user_obj.username,

# 'password':user_obj.password,

# 'gender':user_obj.get_gender_display(),

# })

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

print(res)

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

ajax + 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")

}

}

})

});

})

参考博客:https://www.cnblogs.com/Dominic-Ji/p/9234099.html

参考链接:https://lipis.github.io/bootstrap-sweetalert/

原文：https://www.cnblogs.com/asyouwish/p/11762712.html