• Django基础七之Ajax


    一 Ajax简介

    1.简介

        AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更多使用json数据)。

        AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

        AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。(这一特点给用户的感受是在不知不觉中完成请求和响应过程)

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

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

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

      AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新;(这一特点给用户的感受是在不知不觉中完成请求和响应过程

    2.示例

        页面输入两个整数,通过AJAX传输到后端计算出结果并返回。

        html文件名称为ajax_demo1.html,内容如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="x-ua-compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>AJAX局部刷新实例</title>
    </head>
    <body>
    
    <input type="text" id="i1">+
    <input type="text" id="i2">=
    <input type="text" id="i3">
    <input type="button" value="AJAX提交" id="b1">
    
    <script src="/static/jquery-3.2.1.min.js"></script>
    <script>
      $("#b1").on("click", function () {
        $.ajax({
          url:"/ajax_add/", //别忘了加双引号
          type:"GET",  
          data:{"i1":$("#i1").val(),"i2":$("#i2").val()}, //object类型,键值形式的,可以不给键加引号
          success:function (data) {
            $("#i3").val(data);
          }
        })
      })
    </script>
    </body>
    </html>
    

    views.py里面的内容:

    def ajax_demo1(request):
        return render(request, "ajax_demo1.html")
    
    
    def ajax_add(request):
        #time.sleep(10)  #不影响页面发送其他的请求
        i1 = int(request.GET.get("i1"))
        i2 = int(request.GET.get("i2"))
        ret = i1 + i2
        return JsonResponse(ret, safe=False)
        #return render(request,'index.html')  #返回一个页面没有意义,就是一堆的字符串,拿到了这个页面,你怎么处理,你要做什么事情,根本就没有意义
    

     urls.py里面的内容:

    urlpatterns = [
        ...
        url(r'^ajax_add/', views.ajax_add),
        url(r'^ajax_demo1/', views.ajax_demo1),
        ...   
    ]
    

    启动django项目,然后运行看看效果,页面不刷新

    3.AJAX常见应用情景

    搜索引擎根据用户输入的关键字,自动提示检索关键字。

    还有一个很重要的应用场景就是注册时候的用户名的查重。

    其实这里就使用了AJAX技术!当文件框发生了输入变化时,使用AJAX技术向服务器发送一个请求,然后服务器会把查询到的结果响应给浏览器,最后再把后端返回的结果展示出来。

      a.整个过程中页面没有刷新,只是刷新页面中的局部位置而已!

      b.当请求发出后,浏览器还可以进行其他操作,无需等待服务器的响应!

    当输入用户名后,把光标移动到其他表单项上时,浏览器会使用AJAX技术向服务器发出请求,服务器会查询名为lemontree7777777的用户是否存在,最终服务器返回true表示名为lemontree7777777的用户已经存在了,浏览器在得到结果后显示“用户名已被注册!”。

        a.整个过程中页面没有刷新,只是局部刷新了;

        b.在请求发出后,浏览器不用等待服务器响应结果就可以进行其他操作;

    4.AJAX的优缺点

    优点:

      1.AJAX使用JavaScript技术向服务器发送异步请求;

      2.AJAX请求无须刷新整个页面;

      3.因为服务器响应内容不再是整个页面,而是页面中的部分内容,所以AJAX性能高;

    二 Ajax的使用

    1.基于jQuery的实现

    <button class="send_Ajax">send_Ajax</button>
    <script>
           $(".send_Ajax").click(function(){
               $.ajax({
                   url:"/handle_Ajax/",
                   type:"POST",
                   data:{username:"chao",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>
    

    2.基于原生js实现

    var b2 = document.getElementById("b2");
      b2.onclick = function () {
        // 原生JS
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open("POST", "/ajax_test/", true);
        xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlHttp.send("username=chao&password=123456");
        xmlHttp.onreadystatechange = function () {
          if (xmlHttp.readyState === 4 && xmlHttp.status === 200) {
            alert(xmlHttp.responseText);
          }
        };
      };
    

    3.Ajax-服务器-Ajax流程图

    三 Ajax请求设置csrf_token

    方式1:通过获取隐藏的input标签中的csrfmiddlewaretoken值,放置在data中发送。

    $.ajax({
      url: "/cookie_ajax/",
      type: "POST",
      data: {
        "username": "anwe",
        "password": 123456,
        "csrfmiddlewaretoken": $("[name = 'csrfmiddlewaretoken']").val()  // 使用jQuery取出csrfmiddlewaretoken的值,拼接到data中
      },
      success: function (data) {
        console.log(data);
      }
    })
    

    方式2:

    $.ajaxSetup({
        data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
    });
    

    四 Ajax文件上传

    请求头ContentType

    ContentType指的是请求体的编码类型,常见的类型共有3种:

    1 application/x-www-form-urlencoded

    ​ 这应该是最常见的 POST 提交数据的方式了。浏览器的原生

    表单,如果不设置 enctype 属性,那么最终就会以 默认格式application/x-www-form-urlencoded 方式提交数据,ajax默认也是这个。请求类似于下面这样(无关的请求头在本文中都省略掉了):

    Content-Type: application/x-www-form-urlencoded;charset=utf-8
    
    user=anwne&age=22&sex=man   #这就是上面这种contenttype规定的数据格式,后端对应这个格式来解析获取数据,不管是get方法还是post方法,都是这样拼接数据,大家公认的一种数据格式,但是如果你contenttype指定的是urlencoded类型,但是post请求体里面的数据是下面那种json的格式,那么就出错了,服务端没法解开数据。
    

    看network来查看我们发送的请求体:

    点击一下下面红框的内容,你就会看到,这次post请求发送数据的原始格式

    2 multipart/form-data

    ​ 这又是一个常见的 POST 数据提交的方式。这种方式一般用来上传文件,各大服务端语言对它也有着良好的支持。我们使用表单上传文件时,必须让 表单的 enctype 等于 multipart/form-data,form表单不支持发json类型的contenttype格式的数据,而ajax什么格式都可以发,也是ajax应用广泛的一个原因。

    3 application/json

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

      JSON 格式支持比键值对复杂得多的结构化数据,这一点也很有用。记得以前做过一个项目时,需要提交的数据层次非常深,我就是把数据 JSON 序列化之后来提交的。不过当时我是把 JSON 字符串作为 val,仍然放在键值对里,以 x-www-form-urlencoded 方式提交。

    ​ 如果在ajax里面写上这个contenttype类型,那么data参数对应的数据,就不能是个object类型数据了,必须是json字符串,contenttype:'json',简写一个json,它也能识别是application/json类型

    ​ django里面不能帮我们解析contenttype值为json的数据格式,你知道他能帮你解析application/x-www-form-urlencoded 和multipart/form-data(文件上传会用到)就行了,如果我们传json类型的话,需要我们自己来写一个解析数据的方法,其实不管是什么类型,我们都可以通过原始发送来的数据来进行加工处理,解析出自己想要的数据

    基于form表单的文件上传

    <form action="/upload/" method="post" enctype="multipart/form-data">
    #上面说的其他两种contenttype都是键值的形式发送数据,这种form_data的格式一般是把大数据一段一段隔开的
      {% csrf_token %}
      选择文件:<input type="file" name="head_file">#如果不用form_data格式来发,那么默认的是urlencoded的格式,这个标签的数据会组成head_file:文件名字来进行发送
      用户名:<input type="text" name="username">
      <input type="submit">
    </form>
    

    upload.py

    def upload(request):
        if request.method == 'GET':
            return render(request,'upload.html')
        else:
            print(request.POST)
            username = request.POST.get('user')
            file_obj = request.FILES.get('file_obj') #获得文件数据对象
            print('>>>',file_obj,type(file_obj))
            #>>> jaden博客.txt <class 'django.core.files.uploadedfile.InMemoryUploadedFile'>,一个文件对象,可以理解为一个文件句柄
            file_name = file_obj.name #jaden博客.txt
            print(file_name)
            # 将数据写到文件里面,需要名字,需要数据
            with open(file_name,'wb') as f: #直接把文件名字放这里,那么文件将直接生成在django的整个项目目录下,因为django配置的系统搜索的根路径就是咱们的项目文件夹路径,那个BASE_DIR,一般我们需要自己建立一个文件夹专门存放上传的文件
          #所以需要我们自己来拼接一个路径放到这里,os.path.join(settings.BASE_DIR,'media','img',file_name)
    
                # f.write()  #不能一下写进去,占用的内容太多,要一点一点写
                for data in file_obj: #读数据
                    f.write(data)  #每次读取的data不是固定长度的,和读取其他文件一样,每次读一行,识别符为
      
      
    ,遇到这几个符号就算是读了一行
                    
                # 写入文件 固定大小
           for chunks in file_obj.chunks(): #chunks()默认一次返回大小为经测试为65536B,也就是64KB,最大为2.5M,是一个生成器
               f.write(chunks)
    

    基于Ajax的文件上传

    <form>  ##用不用form没关系,这里就是个盒子的作用,一般写form标签是为了提示别人,这个地方的内容是要提交的
    {% csrf_token %}
        选择文件:<input type="file" id="head_file">   {#multiple#}
        用户名:<input type="text" id="username">
        <button id="btn">提交</button>
    </form>
    <script src="{% static 'js/jquery.js' %}"></script>
    <script>
        $('#btn').click(function () {
            var formdata = new FormData(); #ajax上传文件的时候,需要这个类型,它会将添加给它的键值对加工成formdata的类型
            formdata.append('head_file',$('#head_file')[0].files[0]);#添加键值的方法是append,注意写法,键和值之间是逗号
            formdata.append('username',$('#username').val());
            formdata.append('csrfmiddlewaretoken',$('[name=csrfmiddlewaretoken]').val());#别忘了csrf_token
            $.ajax({
                url: '/upload/',
                type: 'post',
                data: formdata,#将添加好数据的formdata放到data这里
                processData:false,
                contentType:false,
                success:function (res) {
                    console.log(res)
                }
            })
        })
    
    </script>
    
    upload.py和上面的一样
    

    JsonResponse

    JsonResponse是HttpResponse的子类,专门用来生成JSON编码的响应。

    这个类是HttpRespon的子类,它主要和父类的区别在于:

    • 它的默认Content-Type 被设置为: application/json
    • 第一个参数,data应该是一个字典类型,当 safe 这个参数被设置为:False ,那data可以填入任何能被转换为JSON格式的对象,比如list, tuple, set。 默认的safe 参数是 True. 如果你传入的data数据类型不是字典类型,那么它就会抛出 TypeError的异常
    • json_dumps_params参数是一个字典,它将调用json.dumps()方法并将字典中的参数传入给该方法。
    from django.http import JsonResponse
    def index(request):
        d1 = {'name':'anwen'}
    
        
    	# 1、如果这样返回,ajax还需要进行json解析
        import json
        return HttpResponse(json.dumps(d1))
        #success:function(res){ var a = JSON.parse(res) }  反序列化
    
        # 2、使用HttpResponse对象来响应数据的时候,还可以通过content_type指定格式:
        return HttpResponse(json.dumps(d1),content_type='application/json') 
        #--success:function(res)  {res--自定义对象,不需要自己在反序列化了}
        
        
        # 3、看下面这种,JsonResponse默认就是content_type="application/json"。
        return JsonResponse(d1)
    
        # 默认只能传递字典类型,如果要传递非字典类型需要设置一下safe关键字参数。
        d1 = [11,22]
        return JsonResponse(d1,safe=False)
    
    def index(request):
        print(request.body)   # 原始的请求体数据
        print(request.GET)    # GET请求数据
        print(request.POST)   # POST请求数据
        print(request.FILES)  # 上传的文件数据
        return render(request,"index.html")
    
  • 相关阅读:
    python list间的并集、差集与交集
    kafka常用命令,启动/停止/查看主题列表/消费/生产
    python json
    lrzsz
    HashMap实现原理,源码分析
    Java中try catch finally语句中含有return语句的执行情况
    Maven
    我的面试题
    JSON数据格式
    springMVC2
  • 原文地址:https://www.cnblogs.com/an-wen/p/11285115.html
Copyright © 2020-2023  润新知