开发工程师必备————【Day31】ajax异步提交

今日内容概要

• 图书管理系统讲解
• ajax异步提交
• 前后端数据编码格式

图书管理系统讲解

1.基本步骤

• 数据准备
• 首页搭建
• 书籍展示
• 书籍添加
• 书籍编辑
• 书籍删除

2.源码分享
技术权限未公开分享，见谅~

Ajax

1.概念
异步提交 局部刷新
2.与form表单区别
与form表单的区别可以参考码云网址的注册页手机号输入框
3.补充
ajax其实就是js自带的功能 不是一门新的技术点 我们学习的是jQuery封装之后版本

4.基础语法

	$.ajax({
       url:'',   控制数据的提交地址
       type:'',  控制请求方式(默认get请求)
       data:{},  组织提交的数据
       success:function(形参){
               异步回调函数
       }
   })

5.数据编码格式
Content-Type

• 格式1:urlencoded

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

django后端统一处理到request.POST中

• 格式2:formdata

数据格式: 无法查阅

django后端自动将文件数据处理到request.FILES 普通数据request.POST

• 格式3:application/json>

数据格式: json格式
django后端不会处理 在request.body中存储(bytes类型) 自己处理

• ajsx语法注意事项

添加data和contentType字段：

data: JSON.stringify({'name':'jason','pwd':123}),
contentType:'application/json',

6.ajax携带文件数据
要传入的数据中携带文件等数据参数，要添加“contentType”和“processDate”两个字段！！！

$('#d3').click(function () {
   // 1.产生内置对象
   let formData = new FormData();
   // 2.添加普通数据
   formData.append('username',$('#d1').val())
   // 3.添加文件数据
   formData.append('file', $('#d2')[0].files[0])
   // 4.发送ajax请求
   $.ajax({
       url:'',
       type:'post',
       data:formData,
       contentType:false,  // 不使用任何编码
       processData:false,  // 不处理数据对象
       success:function (args) {

       }
   })
})

7.回调函数

• 后端跟ajax交互 不应该再返回页面 通常情况下都是返回json格式数据;
• 前端针对HttpResponse和JsonResponse返回的json格式数据处理策略不同;

前者不会自动反序列化 而后者会自动反序列化
如果想让前者也自动反序列化可以添加一个固定的参数
dataType:'JSON'

序列化

def ser(request):
   #拿到用户表里面的所有的用户对象
   user_list=models.User.objects.all()
   #导入内置序列化模块
   from django.core import serializers
   #调用该模块下的方法，第一个参数是你想以什么样的方式序列化你的数据
   ret=serializers.serialize('json',user_list)
   return HttpResponse(ret)