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

最新推荐文章于 2022-08-19 15:41:51 发布

I believe I can fly~

最新推荐文章于 2022-08-19 15:41:51 发布

阅读量263

点赞数

分类专栏： python 文章标签： django ajax

本文链接：https://blog.csdn.net/qq_31455841/article/details/109164514

版权

python 专栏收录该内容

71 篇文章 2 订阅

订阅专栏

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)

I believe I can fly~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
python-django_ajax-简介_简单使用_上传文件_提交json格式_django内置序列化器

Django-Ajax1. Ajax 简介AJAX Asynchronous Javascript And XML 翻译成中文就是 “ 异步Javascript和XML ” 。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）javascript 通过javascript来操作，发送HTTP请求到服务端xml 数据交互使用xml，现在主流使用json格式xml和json对比 xml:可阅读性
复制链接

扫一扫