Django之组件--ajax

目录

• 一 什么是Ajax
• 二 基于jquery的Ajax实现
• 三 案例
• 四 文件上传
• 五 Ajax提交json格式数据
• 六 Django内置的serializers（把对象序列化成json字符串）

一 什么是Ajax

之前的数据交互用的是form表单，地址栏输入地址，ajax是一种新的交互方式（局部刷新，异步）。

ajax属于js语法，jquery对ajax进行了封装。

概念：

　　contentType 主要设置你发送给服务器的格式；

　　dataType设置你收到服务器数据的格式；

　　contentType都是默认的值：application/x-www-form-urlencoded，这种格式的特点就是，name/value 成为一组，每组之间用 & 联接，而 name与value 则是使用 = 连接。如： wwwh.baidu.com/q?key=fdsa&lang=zh 这是get ；而 post 请求则是使用请求体，参数不在 url 中，在请求体中的参数表现形式也是: key=fdsa&lang=zh的形式。

　　异步Javascript和XML，即使用Javascript语言与服务器进行异步交互，传输的数据为XML（随着技术的发展，现在更多使用json数据）。

$.ajax({
    url:'请求的地址',
    type:'get/post',
　　 contentType:
　　 dataType:'json', 指定之后，后台返回数据都会自动转为字典类型。
    data:{key:value,key2:value2},
    success:function(data){
        alert(data)
    }
})

流程图：

　　 

案例(加法运算)：

　　视图：

def test_ajax(requests):
    n1=int(requests.POST.get('n1'))
    n2=int(requests.POST.get('n2'))
    return HttpResponse(n1+n2

　  js：

$("#submit").click(function () {
        $.ajax({
            url: '/test_ajax/',
            type: 'post',
            data: {
                n1: $("#num1").val(),
                n2: $("#num2").val()
            },
            success: function (data) {
                console.log(data)
                $("#sum").val(data)
            },
        })
    })

　  html：

<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="sum">
<button id="submit">计算</button> 

二 基于jquery的Ajax实现

--

四 文件上传

--

• form表单上传文件

　　　　必须指定 enctype="multipart/form-data"

<form action="/file_put/" method="post" enctype="multipart/form-data">
    用户名：<input type="text" name="name">
    头像：<input type="file" name="avatar" id="avatar1">
<input type="submit" value="提交">
</form>

def file_put(request):
    if request.method=='GET':
        return render(request,'file_put.html')
    else:
        # print(request.POST)
        # print(request.POST)
        print(request.body)  # 原始的请求体数据 
        print(request.GET)  # GET请求数据 
        print(request.POST)  # POST请求数据 
        print(request.FILES)  # 上传的文件数据
        # print(request.body.decode('utf-8'))
        print(request.body.decode('utf-8'))

        print(request.FILES)
        file_obj=request.FILES.get('avatar')
        print(type(file_obj))
        with open(file_obj.name,'wb') as f:
            for line in file_obj:
                f.write(line)
        return HttpResponse('ok')

• ajax上传文件

$("#ajax_button").click(function () {
        var formdata=new FormData()
        formdata.append('name',$("#id_name2").val())
        formdata.append('avatar',$("#avatar2")[0].files[0])
        $.ajax({
            url:'',
            type:'post',
            processData:false, //告诉jQuery不要去处理发送的数据
            contentType:false,// 告诉jQuery不要去设置Content-Type请求头
            data:formdata,
            success:function (data) {
                console.log(data)

            }

        })
    })

五 Ajax提交json格式数据

ajax 的复杂JSON数据，用 JSON.stringify序列化后，然后发送，在服务器端接到然后用 JSON.parse 进行还原就行了，这样就能处理复杂的对象了。

$.ajax({
    dataType: 'json',
    contentType: 'application/json',
　　 #将json格式数据转换为字符串，才能传输
    data: JSON.stringify({a: [{b:1, a:1}]})
})

这样你就可以发送复杂JSON的对象了。

六 Django内置的serializers（把对象序列化成json字符串）

#很少用，常用DRF中的序列化组件
from django.core import serializers

 

from django.core import serializers
def test(request):
    book_list = Book.objects.all()    
    ret = serializers.serialize("json", book_list)
    return HttpResponse(ret)