Django-Ajax使用

一、ajax简介

Ajax,(asynchronous JavaScript and XML)全名翻译为：异步的JavaScript 和XML。这里有三个重点，异步，js，xml

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

# 1 异步 Javascript 和 XML:
异步: 即异步交互
javascript：通过javascript来操作，发送请求到服务端
xml：数据交互使用xml，但现在主流使用json格式

# xml与json对比
xml: 可阅读性比较高，解析复杂，占的空间大
< name > lqz < / name >
< age > 19 < / age >

json: 可阅读性比较高，解析简单，占的空间小
{"name": "lqz", "age": 19}

浏览器页面局部刷新（js的dom操作,就是利用了ajax技术）
是一个通过js发送http的请求的技术（因为这些一个目前非常通用且火热是技术，所以各种语言都会有自己对ajax的处理方法）

二、ajax的简单使用

1.原生js写ajax请求（写起来很复杂，而且需要考虑浏览器版本）
2.jquery封装好了一个方法ajax，我们直接调用jquery的方法，就可以发送ajax的请求
3.前后端分离后，还是可以继续使用jquery的ajax，目前axios更主流一些，两者都是ajax技术，本质一样

# 模板，一般会绑定在一个js事件当中。比如绑定一个按钮的点击事件
    $.ajax({
        url: '/add/', 
      '''
      写地址，要进django的urls匹配，且在这里只能写完整的地址，因为ajax无法重定向，若写/add，django虽然会帮你加上/但是，无法重定向到这个页面，导致报错
      '''
        method: 'post',  # 请求方式，写get，或者json格式都行
        data:{'num1':$("#num1").val() ,'num2':$("#num2").val() },  # 这里构建自己要传的数据格式，这里的key不一定要和标签的对应，但是你这里写什么，后端拿到的key就是什么
        success:function (data) {
            //成功触发执行的代码
          	alert("1");
        },
        error:function (error) {
            //失败触发执行的代码
          	alert("0");
        }
    })
    
# 编码默认用urlencoded
# 默认情况下ajax会把{'num1':$("#num1").val() ,'num2':$("#num2").val() }数据转成预处理数据
# 预处理数据：
a=20&b=30  # 会把这个放到body体中

注意：（坑：在form表单中写button，input的submit，用jquery，操作button），会发两次请求，因为ajax会发一次，form自己又发一次

利用ajax做简单的加法运算，将我们获取的值，传给后端，计算完成后返回结果。(只是一个例子，这个功能其实前端直接js计算得到结果就行)

<!-- html代码 -->
<input type="text" id="first">+<input type="text" id="second">=<input type="text" id="result">
<button id="btn">点我计算结果</button>

//js代码
//击button按钮，触发ajax
$("#btn").click(function () {
    $.ajax({
        url: '/add/',  //向哪个地址发送请求
        method: 'post', //发送什么请求
        //使用jquery，获取输入框内的值
        //向后端传输的数据(没有指定编码，默认使用urlencoded)
        data: {'a': $("#first").val(), 'b': $("#second").val()},
        success: function (data) {
            //数据正常返回，就会触发该匿名函数的执行，返回的数据就会复制给data
            console.log(data)
            //把后端返回的数据，通过dom操作，写到input框中
            $('#result').val(data)
        },
        //请求失败，就会触发error的执行，并且把错误信息给error
        error: function (error) {
            console.log(error)
        }
    })
})

三、ajax上传文件

1 http请求，body体中放文件内容，ajax本质就是发送http请求，所以它可以上传文件
2 两种上传文件的方式，form表单，ajax

// 模板
var formdata=new FormData() 
// 拿文件对象固定格式 $("#id_file")[0].files[0]
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)
        }
    })

文件上传

<!-- html页面 -->
<p><input type="file" id="id_file"></p>
<p>用户名：<input type="text" id="id_name"></p>
<button id="btn_file">提交</button>

//ajax上传文件,js代码
$("#btn_file").click(function () {
    var formdata = new FormData() //实例化得到一个fromdata对象
    //把文件放到对象内
    //formdata.append('myfile',文件对象)
    //拿文件对象固定格式$("#id_file")[0].files[0],我们input标签用什么id，这里对应什么id就可以取到
    formdata.append('myfile', $("#id_file")[0].files[0])
    //问题:fomdata现在只放了一个文件对象，可不可以放数据？可以
    //formdata.append('name','lqz')
    formdata.append('name', $("#id_name").val())
    $.ajax({
        url: '/uploadfile/',
        method: 'post',
        //上传文件必须写这两句话
        processData: false,
        contentType: false,
        data: formdata,
        success: function (data) {
            alert(data)
            //console.log(data)
            //location.href='http://www.baidu.com'

        }
    })
})

四、ajax提交json格式

//把字典转成json格式字符串
JSON.stringify(dic)
//把json格式字符串转成对象
JSON.parse(data)

$.ajax({
            url:'/uploajson/',
            method:'post',
            contentType: 'application/json',
            //data需要是一个json格式字符串
            //data:'{"name":"","password":""}',
            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)
            }
        })

在后端，需要从request.body中获取到我们想要的json数据，拿到后，先利用json.loads把bytes格式的json字符串转成字典，然后对字典进行自己想要的操作，再利用JsonResponse或者HttpResponse返回

-HttpResponse：它没有指定，text/html
-JsonResponse：它指定了响应编码：application/json
-ajax方法：会去看响应编码是什么，如果是application/json，自动调用JSON.parser(),如果不是json格式，就不处理
-于是：success：function (data)  可能是个字符串，也可能是个对象，响应编码决定的

五、django内置序列化器

了解即可，不好用，后面有更好的

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


def func1(request)
		from django.core import serializers
		book_list = Book.objects.all()    
		ret = serializers.serialize("json", book_list)  # ret就是json格式字符串
		return HttpResponse(ret)