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:},
                success:function(data){
                    console.log(data)
                },
                error: function (jqXHR, textStatus, err) {
                         console.log(arguments);
                     },

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

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

                     '': 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: ,
                         b:
                     }),
                     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')[].files[])
                 $.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')