python-django_ajax-简介_简单使用_上传文件_提交json格式_django内置序列化器

Django-Ajax

1. Ajax 简介

AJAX

Asynchronous Javascript And XML 翻译成中文就是 “ 异步Javascript和XML ” 。

​ 即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据)

javascript
	通过javascript来操作,发送HTTP请求到服务端

xml
	数据交互使用xml,现在主流使用json格式

xml和json对比
    xml:可阅读性比较高,解析复杂,占的空间大
        <name>lqz</name>
        <age>19</age>

    json:可阅读性比较高,解析简单,占的空间小
        {"name":"lqz","age":19}
  • 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求
  • 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求

AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新 (js的dom操作)

(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

应用场景

在这里插入图片描述

优点:

  • AJAX使用Javascript技术向服务器发送异步请求
  • AJAX无须刷新整个页面

2. 基于jquery的Ajax实现

Ajax---->服务器------>Ajax 执行流程图

在这里插入图片描述

<button class="send_Ajax">send_Ajax</button>
<script>
       $(".send_Ajax").click(function(){

           $.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"Yuan",password:123},
               success:function(data){
                   console.log(data)
               },
               
               error: function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    },

               complete: function (jqXHR, textStatus) {
                        console.log(textStatus);
                },

               statusCode: {
                    '403': function (jqXHR, textStatus, err) {
                          console.log(arguments);
                     },

                    '400': function (jqXHR, textStatus, err) {
                        console.log(arguments);
                    }
                }
           })
       })
</script>

3. ajax 简单使用

案例

# 注意
    1. 原生js写ajax请求(写起来很复杂,而且需要考虑浏览器版本)
    2. jquery帮咱们封装好了一个方法ajax,我们直接调用jquery的方法,就可以发送ajax的请求
    3. 后期,前后端分离,还可以继续使用jquery的ajax, axios更主流一些
    4. 现在我们学的jquery的ajax方法的使用

# 示例    
1. 需求
	通过Ajax,实现前端输入两个数字,服务器做加法,返回到前端页面

2. 模板
    $.ajax({
        url: '/add/',  
        method: 'post',
        data:{'a':$("#first").val() ,'b':$("#second").val() },
        success:function (data) {
            //成功触发
        },
        error:function (error) {
            //失败,触发
        }
    })
    
    # 默认清空下ajax会把{'a':$("#first").val() ,'b':$("#second").val() }数据转成
    	a=20&b=30,放到body体中 # 预处理数据  编码默认用urlencoded
视图函数
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)
        },
    })
})
模板
<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="sum">
<button id="submit">计算</button>

4. ajax 上传文件

1. 请求头ContentType

1. application/x-www-form-urlencoded
最常见的 POST 提交数据的方式
	浏览器的原生 <form> 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求类似于下面这样(无关的请求头在本文中都省略掉了):

    POST http://www.example.com HTTP/1.1
    Content-Type: application/x-www-form-urlencoded;charset=utf-8

    user=lqz&age=22
2. multipart/form-data
常见的 POST 数据提交的方式
	我们使用表单上传文件时,必须让 <form> 表单的 enctype 等于 multipart/form-data

直接来看一个请求示例:

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="user"

yuan
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--
3. application/json
application/json 
	这个 Content-Type 作为响应头大家肯定不陌生。实际上,现在越来越多的人把它作为请求头,用来告诉服务端消息主体是序列化后的 JSON 字符串。由于 JSON 规范的流行,除了低版本 IE 之外的各大浏览器都原生支持 JSON.stringify,服务端语言也都有处理 JSON 的函数,使用 JSON 不会遇上什么麻烦。

	JSON 格式支持比键值对复杂得多的结构化数据,这一点也很有用。

2. 基于Form表单上传文件

1. http请求,body体中放文件内容,ajax本质就是发送http请求,所以它可以上传文件
2. 两种上传文件的方式,form表单,ajax
3. 固定模板
    var formdata=new FormData() 
    formdata.append('myfile',$("#id_file")[0].files[0])
    # 还可以带数据
    $.ajax({
            url:'/uploadfile/',
            method: 'post',
            //上传文件必须写这两句话
            processData:false,  # 预处理数据,
            contentType:false,  # 不指定编码,如果不写contentType,默认用urlencoded
            data:formdata,      # formdata内部指定了编码,并且自行处理数据
            success:function (data) {  
                console.log(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>

/* 必须指定 enctype="multipart/form-data" */
视图函数
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')

3. 基于Ajax上传文件

js代码
$("#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)
        }
    })
})

5. Ajax提交json格式数据

提交到服务器的数据都在 request.body 里,取出来自行处理

# 模板
$("#ajax_test").click(function () {
        var dic={'name':'lqz','age':18}
        $.ajax({
            url:'',
            type:'post',
            contentType:'application/json',  //一定要指定格式 contentType: 'application/json;charset=utf-8',
            data:JSON.stringify(dic),    //转换成json字符串格式
            success:function (data) {
                console.log(data)
            }
        })
    })

# 示例
$.ajax({
    url:'/uploajson/',  //写全,是什么样就写什么样
    method:'post',
    contentType: 'application/json',
    //data要是json格式字符串
    //data:'{"name":"","password":""}',
    //把字典转成json格式字符串
    //JSON.stringify(dic)
    //把json格式字符串转成对象
    //JSON.parse(data)
    data:JSON.stringify({name:$("#id_name1").val(),password:$("#id_password1").val()}),
    success:function (data) {
        //返回字符串类型,需要转成js的对象,字典

        //1 如果:django 返回的是HttpResponse,data是json格式字符串,需要自行转成字典
        //2 如果:django 返回的是JsonResponse,data是就是字典
        //ajax这个方法做的是,如果响应数据是json格式,自动反序列化

        console.log(typeof data)
        var res=JSON.parse(data)
        console.log(typeof res)
        console.log(res.status)
        console.log(res.msg)
            }
        })

6. django内置序列化器

1. 把对象转成json格式,json.dumps实现不了

2. django内置了一个东西,可以把对象转成json格式
	from django.core import serializers

3. 示例  
from django.core import serializers
def test(request):
    book_list = Book.objects.all()    
    ret = serializers.serialize("json", book_list) # ret就是json格式字符串

    ll=[]
    for book in book_list:
        ll.append({'name':book.name,'price':book.pirce})  
    import json
    ret=json.dumps(ll)
    return HttpResponse(ret)
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

I believe I can fly~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值