Django学习 day66之Django与Ajax第十二日

一 ajax介绍

1. 异步 Javascript 和 XML:
   -异步:跟同步是对应的
   -javascript：通过javascript来操作，发送请求 ，到服务端
   -xml：数据交互使用xml，现在主流使用json格式
   -xml:可阅读性比较高，解析复杂，占的空间大
   lqz
   19
   -json:可阅读性比较高，解析简单，占的空间小
   {“name”:“lqz”,“age”:19}
   -浏览器页面局部刷新（js的dom操作）

   -通过js发送http的请求（go，java，php，requset）

2. 同步和异步

3. IAAS，PAAS，SAAS

4. 同步交互和异步交互
   同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求。
   异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

二 ajax的简单使用

1. 原生js写ajax请求（写起来很复杂，而且需要考虑浏览器版本）

2. jquery帮咱们封装好了一个方法 ajax，我们直接调用jquery的方法，就可以发送ajax的请求

3. 后期，前后端分离了，还可以继续使用jquery的ajax， axios更主流一些

4. 现在我们学的jquery的ajax方法的使用

5. 需求：通过Ajax，实现前端输入两个数字，服务器做加法，返回到前端页面

6. 模板

   $.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

三 ajax上传文件

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)
           }
       })
   

四 ajax提交json格式

$.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)
            }
        })

五 django内置序列化器（了解，不好用，后面有更好的）

1. 把对象转成json格式，json.dumps实现不了，
2. django内置了一个东西，可以把对象转成json格式

   from django.core import serializers
   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)