010---Django与Ajax

预备知识：
    什么是Json?

    定义：json是一种轻量级的数据交换格式。
        如果我们要在不同的编程语言中传递对象，就必须把对象序列化为标准格式，比如XML,但那是以往的时代，现在大多数使用序列化为json，因为json本身就是一个字符串，层次清晰，易阅读可以被所有语言读取，也方便的存储到磁盘和网络传输。
    格式：一个无序的key:value集合。{"k1":"v1","k2":"v2"}

    在程序运行过程中。所有的变量都是存在内存中。一旦程序结束，变量也会被销毁。
    所以：
        序列化：我们把变量从内存中变成可存储或者可传输的过程称为序列化
        反序列化：把变量内容从序列化的对象重新读取到内存里称为反序列化

    在js里面有两个常用方法实现json字符串和json对象互转

    json对象---json字符串
        JSON.stringify():
        console.log(JSON.stringify({'name':'xjm'));

    json字符串---js对象
        JSON.parse()
        console.log(JSON.parse('{"name":"xjm})');
    注意：
        json对象属性名必须是双引号
        不能使用undefined;
        不能是函数和日期对象

Ajax
    ajax：翻译成中文就是异步JavaScript和XML。就是使用JavaScript语言与服务器进行异步交互，传输的数据为xml，当然现在不只是xml，更多的是使用Json数据

    特点：
        异步交互：客户端发出一个请求后，无需等服务器响应结束，就可以发出第二个请求
        局部刷新：给用户的感受是在不知不觉中完成请求和响应过程，无需刷新整个页面

场景：
    注册的错误提示：该用户已注册、该用户名已被使用等
    百度等搜索引擎的输入框提示：输入一个python关键词后会出现一个下拉列表，这里用到了ajax技术，当输入框输入变化时，浏览器会偷偷向服务器发送一个请求，然后接收响应显示。

基于Jquery的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>

 

$.ajax()参数

    请求参数：
        url:请求路径
        type:请求类型，默认get
        data:{a:1,b:2}  ajax默认get请求  默认urlencoded编码类型提交数据  /?a=1&b=2
        processData:声明当前的data数据是否进行转码或预处理  默认True
        contentType:发送数据时的编码类型
　　

　　请求头ContentType
    　　是指请求体的编码类型，常见的有三种：

　　　　1、application/x-www-form-urlencoded

    　　最常见的post提交数据的方式，form表单如果不设置enctype属性，那么默认就是这种方式提交

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

       username=jzy&age=22
　　　2　、multipart/form-data
   　　 这也是一个常见的post提交数据的方式。我们使用表单上传文件时，必须在form中添加enctype=multipart/form-data/

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

　　3、application/json
    　　这个作为响应头大家应该不陌生，但是现在越来越多的人把它作为请求头。用来告诉服务端消息主体是序列化后的json字符串。

    响应参数：
        dataType:预期服务端返回的数据类型，服务端返回的数据会根据这个值解析后，传递给回调函数。

csrf跨站请求伪造

    data:{
        "csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val();
    }

    $.ajax({
        headers:{"X-CSRFToken":$.cookie('csrftoken')}
    })

基于form表单的文件上传

    模板部分：
        <form action="" method="post" enctype="multipart/form-data">
              用户名 <input type="text" name="user">
              头像 <input type="file" name="avatar">
            <input type="submit">
        </form>
    视图部分：
        def index(request):
            print(request.body)   # 原始的请求体数据
            print(request.GET)    # GET请求数据
            print(request.POST)   # POST请求数据
            print(request.FILES)  # 上传的文件数据


            return render(request,"index.html")

 

基于Ajax的文件上传

模版部分
        <h3>基于Ajax文件上传</h3>
        <form>
            用户名：<input type="text" id="user">
            密码：<input type="password" id="pwd">
            <p>头像：<input type="file" id="head_imgurl"></p>
            <!--input 的type类型一定不能是submit-->
            <input type="button" value="Json" class="json按钮">
            <input type="button" value="Ajax" class="ajax按钮">
        </form>

        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        <script>

            //发送json数据
            $('.json').click(function () {
                $.ajax({
                    url: '',
                    type: 'post',
                    contentType: 'application/json',
                    data: JSON.stringify({
                        a: 1,
                        b: 2
                    }),
                    success: function (data) {
                        console.log(data)
                    }
                })
            });

            //ajax文件上传
            $('.ajax').click(function () {
                var formdata=new FormData();
                formdata.append("user",$('#user').val());
                formdata.append("pwd",$('#pwd').val());
                formdata.append("head_imgurl",$('#head_imgurl')[0].files[0])
                $.ajax({
                    url:'',
                    type:'post',
                    contentType:false,  // 不设置内容类型
                    processData:false,  // 不处理数据
                    data:formdata,
                    success:function (data) {
                        console.log(data);
                    }
                })
            })
        </script>
    视图部分
        def file_put(request):
            if request.method == 'POST':
                print(request.body)  # 请求报文
                print(request.POST)  # 只有请求头是urlencoded时，才有数据

                # data = request.body.decode('utf-8')
                # import json
                # print(json.loads(data).get('a'))
                # print(json.loads(data).get('b'))


                # user = request.POST.get('user')

                # 获取文件对象
                file_obj = request.FILES.get('head_imgurl')

                # 文件名称：file_obj.name
                with open(file_obj.name,'wb') as f:
                    for line in file_obj:
                        f.write(line)
                return HttpResponse('ok')

            return render(request,'file_put.html')