ajax数据交互

目录

• 一、ORM查询优化
  • 1-1. only与defer
  • 1-2. select_related与prefatch_related
• 二、MTV与MVC模型
• 三、choices参数
• 四、AJAX
  • 4-1. JSON和XML
    • （1）什么是Json
    • （2）JSON的用法
    • （3）XML
  • 4-2. 什么是AJAX（异步提交、局部刷新）
  • 4-3. jQuery实现AJAX
  • 4-4. 前后端传输数据编码格式
    • （1）urlencoded格式
    • （2）formdata格式
    • （3）application/json格式
  • 4-5. Ajax传输json格式数据和文件数据
    • （1）传输json格式数据
    • （2）传输文件数据
  • 4-6. 序列化（serializers）

一、ORM查询优化

1-1. only与defer

• only

1. 括号内放字段，返回包含着一个个数据对象的queryset对象(列表套数据对象)，数据对象中只含有该字段值
2. 也可以查询其他字段，但是数据需要重新去数据库中查找，效率极低

res = models.Book.objects.only('title')

• defer

1. defer查询出来的对象包含除了该字段以外的其他字段值
2. 也可以查询其他字段，但是数据需要重新去数据库中查找

res = models.Book.objects.defer('title')

1-2. select_related与prefatch_related

• select_related

1. 括号内只能放外键字段，外键类型只能是一对一、一对多，不能是多对多
2. 内部是联表操作，查询出来的是原表和外键关联的表，因此查询外键关联的表时不需要再去数据库访问
3. 当表数据很多时，比较耗时，耗时在联表操作

res = models.Book.objects.select_related('publish')
for i in res:
    # print(i.title)
    print(i.publish)

• prefatch_related

1. 括号内只能放外键字段（可以放多个），会按步骤查询多张表，相当于子查询
2. 访问数据库次数多，每多放一个外键字段，就会多访问一次数据库，耗时在查询次数

res = models.Book.objects.prefetch_related('publish','authors')
for i in res:
    # print(i.title)
    print(i.publish)

二、MTV与MVC模型

1. django自称为是MTV框架，其实本质是MVC
2. MTV：把web应用分为模型（Model）、模板（Template）、视图（View）三层， 他们之间以一种插件似的，松耦合的方式连接在一起。
   1. Model(模型)：负责业务对象与数据库的对象(ORM)
   2. Template(模版)：负责如何把页面展示给用户
   3. View(视图)：负责业务逻辑，并在适当的时候调用Model和Template
3. MVC：把web应用分为模型（Model）、控制器（Control）、视图（View）三层， 他们之间以一种插件似的，松耦合的方式连接在一起。
   1. 模型负责业务对象与数据库的对象(ORM)
   2. 视图负责与用户的交互(页面)
   3. 控制器(C)接受用户的输入调用模型和视图完成用户的请求。

三、choices参数

1. .get_字段名_display：获取数字对应的值得统一句式，否则只能获得数字
2. 没有对应关系，获取的也还是数字
3. 主要用在一些可以明确给出所有可能性的地方，如 性别,学历,婚否等。先提前定义好对应关系，再通过字段的choices参数来指定关系

# models.py
class User(models.Model):
    username = models.CharField(max_length=64)
    password = models.IntegerField()
    gender_choices = (
        (1,'男'),
        (2,'女'),
        (3,'其他'),
    )
    gender = models.IntegerField(choices=gender_choices)
    
# test.py  
user_obj = models.User.objects.get(pk=1)
user_obj1 = models.User.objects.get(pk=4)

print(user_obj.gender)  # 1
print(user_obj1.gender)  # 4
print(user_obj.get_gender_display())  # 男
print(user_obj1.get_gender_display())  # 4

四、AJAX

4-1. JSON和XML

（1）什么是Json

1. JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
2. JSON 是轻量级的文本数据交换格式
3. JSON 独立于语言 *
4. JSON 具有自我描述性，更易理解

JSON 使用 JavaScript 语法来描述数据对象，但是 JSON 仍然独立于语言和平台。JSON 解析器和 JSON 库支持许多不同的编程语言。

（2）JSON的用法

• JavaScript

1. 序列化：JSON.stringify()
2. 反序列化：JSON.parse()

• Python
  1. 序列化：json.dumps()
  2. 反序列化：json.loads()

（3）XML

1. XML也是一门标记语言，可应用于写配置文件和前端页面（odoo框架，用于开发企业内部管理软件，依赖于python2）
2. JSON 格式于2001年由 Douglas Crockford 提出，目的就是取代繁琐笨重的 XML 格式

4-2. 什么是AJAX（异步提交、局部刷新）

1. AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）
2. 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
3. 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求，比如注册时用户名查重
4. AJAX 不是新的编程语言，而是一种使用现有标准的新方法 ，不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行
5. 优点： 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容（异步交互）

4-3. jQuery实现AJAX

1. $.ajax({})：开启AJAX的语法句式
2. url：数据提交的后端地址，不写就是往当前页面提交，和actions的作用一样
3. type：请求的方式，默认get请求
4. data：提交给后端数据，此时HttpResponse对象返回的不是页面，而是与data交互
5. success:function(data){}：固定写法，参数data为后端返回的数据
6. is_ajax()：是否是ajax请求，返回布尔值

<!--xxx.html-->
<script>
    $('#d4').on('click',function () {
        // 开启ajax语法
        $.ajax({
            url:'',  // 数据提交的后端地址  不写就是往当前页面提交  也可以写后缀 也可以写全称  跟actions一样
            type:'post',  // 提交方式  默认是get请求
            data:{'i1':$('#d1').val(),'i2':$('#d2').val()},  // 提交的数据
            success:function (data) {  // 形参data就是异步提交之后后端返回结果
                $('#d3').val(data)  // 回调机制需要做的事情#
                alert(data)
            }
        })
    })
</script>
# views.py
def xxx(request):
    # print(request.is_ajax())  # 判断当前请求是否是ajax请求
    # print(request.POST)  # ajax发送的post请求 普通的键值对也在request.POST中获取
    if request.is_ajax():
        # i1 = request.POST.get('i1')
        # i2 = request.POST.get('i2')
        # res = int(i1) + int(i2)
        # return HttpResponse(res)  # 给异步回调函数 success
        # return render(request,'xxx.html')  # 给异步回调函数 success
        return redirect('https://www.baidu.com')  # 给异步回调函数 success
    return render(request,'xxx.html')

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

（1）urlencoded格式

1. 对应的数据格式为username=wick&password=123，django后端会自动解析并封装到request.POST中
2. ajax和form表单中默认的编码格式

（2）formdata格式

1. 用于发送文件，该格式的数据浏览器上无法查看，django后会自动识别并封装到request.FILES中
2. ajax和form表单都可以发送

（3）application/json格式

form表单无法发送该格式数据，只能通过ajax

4-5. Ajax传输json格式数据和文件数据

（1）传输json格式数据

1. django后端不会对json格式的数据进行处理，需要手动序列化与反序列化，
2. contentType:'application/json',：设置数据类型格式
3. data:JSON.stringify({'username':'jason','password':'123'}),：序列化数据

<script>
    // 传json格式的数据
    $('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',
            contentType:'application/json',
            data:JSON.stringify({'username':'jason','password':'123'}),
            success:function (data) {
                alert(123)
            }
        })
</script>

（2）传输文件数据

1. 生成内置对象：var MyFormData = new FormData();，该对象可以传输文件数据，也支持普通键值对
2. append：添加普通键值或者文件数据
3. $('#d1')[0].files[0]：input框中文件对象
4. contentType:false,：MyFormData对象内部自带编码 django后端能够识别
5. processData:false,：不需要处理数据

<script>
    // 传文件
    $('#d1').click(function () {
        // 先生成一个内置对象
        var MyFormData = new FormData();
        // 1. 先添加普通的键值
        MyFormData.append('username','jason');  // 添加了一组普通的简直对
        MyFormData.append('password','123');
        MyFormData.append('hobby',['read','run']);
        // 2. 添加文件数据
        MyFormData.append('myfile',$('#d2')[0].files[0]);  // 如何获取input框中文件对象$('#d1')[0].files[0]
        $.ajax({
            url:'',
            type:'post',
            data:MyFormData,

            // 发送文件必须要指定的两个参数
            contentType:false,  // MyFormData对象内部自带编码 django后端能够识别
            processData:false,  // 不要处理数据

            success:function (data) {
            }
        })
    })
</script>

4-6. 序列化（serializers）

1. 可以把orm查询出来的数据对象中的所有字段值自动整合成一个字典发送给客户端，方便数据交互
2. 字典包括表名、主键值、封装了字段对应值的字典

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