ajax序列化提交大数据类型,第六章、ajax方法以及序列化组件

第六章、ajax方法

一、choice参数介绍

存choice里面罗列的数字与中文对应关系，可用作为数据库表中的数据

​

二、MTV与MVC模型

Django的MTV分别是：

M 带包模型(model)

负责业务对象和数据库的关系映射(ORM)

T 代表模板(template)

负责如何把页面展示给用户(html)

V 代表视图 (view)

负责业务逻辑 并在适当时候调用Model和Template

-----------------------------------------------------------------------------------------------------------

MVC 设计模型是一种使用 Model View Controller( 模型-视图-控制器)设计创建 Web 应用程序的模式。

models(模型)：是应用程序中用于处理应用程序数据逻辑的部分。

通常模型对象负责在数据库中存取数据。

view(视图)：是应用程序中处理数据显示的部分。

通常视图是依据模型数据创建的。

controller(控制器)：是应用程序中处理用户交互的部分。

通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

三、ajax方法

**两大特点：异步提交、局部刷新 **

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

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

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

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

程序运行的三状态图

局部刷新

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

说明: Ajax是一门js的技术 基于原生js开发的，但是用原生的js写代码过于繁琐，我们在学的时候 只学如何用jQuery实现ajax, AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

​

四、案例

1.展示一个前端页面 页面上有三个输入框 前两个框输入数字 点击按钮朝后端发请求

​ 页面不刷新的情况下 完成数字的加法运算

html部分代码

+ =

计算

$('#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)

在前端中的代码的注意点：

1.指定contentType参数

contentType:'application/json',

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

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

请看代码：

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

// 朝后端提交post数据

$.ajax({

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

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

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

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

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

contentType:'application/json',

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

{#data:{'t1':$('#t1').val(),'t2':$('#t2').val()},#} 此处需要contentType指定编码格式urlencoded

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

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

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

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

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

alert(data)

}

})

})

六、 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, // 不用任何编码 因为formdata对象自带编码 django能够识别该对象

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

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

form表单 默认的提交数据的编码格式是urlencoded

说明： username=admin&password=123这种就是符合urlencoded数据格式

django后端针对username=admin&password=123的urlencoded数据格式会自动解析

将结果打包给request.POST 用户只需要从request.POST即可获取对应信息

formdata

django后端针对formdata格式类型数据 也会自动解析

但是不会方法request.POST中而是给你放到了request.FILES中

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

username=jason&password=123

总结:django后端针对不同的编码格式数据 会有不同的处理机制以及不同的获取该数据的方法

"""

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

前段后交互 你不能骗人家

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

"""

七、序列化组件

序列化组件 serializers

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(需要导入static文件)

ajax + sweetalert(需要导入static文件)

$("#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")

}

}

})

});

})