Django(七)---AJAX

AJAX简介

AJAX(Asynchronous Javascript And XML),翻译成中文就是'异步的javascript和XML'

使用javascript语言与服务器进行异步交互,传输的数据为XML

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

AJAX不需要任何浏览器插件,但需要用户允许Javascript在浏览器上执行

同步交互:客户端发出一个请求后,需要等待服务器相应结束后,才能发出第二个请求

异步交互:客户端发出一个请求之后,无需等待服务器响应结束,就可以发出第二个请求

ajax基本语法结构

is_ajax()判断当前请求是否是ajax请求,返回布尔值

使用ajax之后,httpresponse都不在作用于页面,而是直接与ajax做交互

$('#d4').on('click',function () {
    $.ajax({
        url:'',  // 数据提交的后端地址  不写就是往当前页面提交  也可以写后缀 也可以写全称  跟actions一样
        type:'post',  // 提交方式  默认是get请求
        data:{'i1':$('#d1').val(),'i2':$('#d2').val()},  // 提交的数据
        success:function (data) {  // 形参data就是异步提交之后后端返回结果
            $('#d3').val(data)  // 回调机制需要做的事情
        }
    })
})

前后端传输数据编码格式

前后端交互之间有一个数据编码格式,对于不用的数据,后端进行不同的处理

如: request.POST和request.FILES 这两种都是用来获取用户传输过来的数据

编码格式(后缀):

1. urlencoded
2. formdata(enctype)
3. application/json格式数据

往后端发送数据方法:

1. a标签通过href携带参数			get请求
2. form表单                            get/post
3. ajax                                     get/post

form表单发送数据的编码格式

for目标单默认的编码方式的urlencoded

urlencoded所对应的的数据格式:

username=simple&password=123

django后端针对urlencoded数据,会自动解析并且封装到request.POST中
1. form表单发送文件时,编码格式是Content-Type: multipart/form-data;
django后端只要数据是满足urlencoded格式,就会自动解析到request.POST中

如果是一个文件对象,django后端也会自动识别,并放入request.FILES中
1. form表单无法发送json格式的数据,如果要发送,只能借助于ajax

ajax发送数据的编码格式

ajax能发送的三种格式

1. urlencoded
2. formdata
3. application/json格式数据

ajax通过contentType参数,修改编码格式:

转化成json数据格式

contenType:'application/json

Content-Type: application/x-www-form-urlencoded; charset=UTF-8

ajax默认的编码格式也是urlencoded,后端django也是将数据解析到request.POST中

注意:

在涉及前后端数据交互的时候,数据的格式与编码格式一定要一致

ajax传输json格式数据

后端				前段
dumps			stringify
loads			parse

通过ajax发送json格式数据,在data

Content-Type: application/json

$('#d1').click(function () {
$.ajax({
    url:'',
    type:'post',
    contentType:'application/json',  # 1.注意点1
    data:JSON.stringify({'username':'jason','password':'123'}),  # 2.注意点2
    success:function (data) {
        alert(123)
    }
})

django针对前后传输过来的json数据不会做处理

会直接放入request.body中(二进制的json数据)

Ajax传输文件数据

借助于内置对象 new
该对象即可以携带文件数据同样也支持普通的键值对

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

       // 发送文件必须要指定的两个参数
       contentType:false,  // 不适用任何编码  MyFormData对象内部自带编码 django后端能够识别  #2
       processData:false,  // 不要处理数据  # 3
       success:function (data) {
       }
   })
})

序列化

序列化将数据整合成一个大字典的形式,方便前后端数据的交互,实现前后端分离

from app01 import models
from django.core import serializers
# 序列化目的  将数据整合成一个大字典形式 方便数据的交互
def zzz(request):
    user_queryset = models.User.objects.all()
    # [{username:...,password:...,hobby:...,},{},{},{}]
    # user_list = []
    # for data in user_queryset:
    #     user_list.append(
    #         {'username':data.username,
    #          'password':data.password,
    #          'gender':data.get_gender_display(),
    #
    #          }
    #     )
    res = serializers.serialize('json',user_queryset)
    return HttpResponse(res)