Django使用Ajax

Django中使用Ajax

一、Ajax的应用:

异步提交：
同步异步：描述任务的提交方式
同步：提交任务之后，等待任务的返回结果，期间不干其他事
异步：提交任务之后，不等待返回结果，直接执行后面的步骤，任务的返回通过回调机制
阻塞非阻塞：程序的运行状态
程序运行的三状态图
局部刷新
一个页面，不是整体刷新而是页面的某个地方局部刷新

Ajax是一门js的技术，基于原生js开发。

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

示例：

<input type="text" id="t1"> + <input type="text" id="t2"> = <input type="text" id="t3">
<p><button id="b1">计算</button></p>

$('#b1').on('click', function(){
// 朝后端提交post数据
    $.ajax({
        // 1.到底朝后端哪个地址发数据
        url:'', // 专门用来控制朝后端提交数据的地址
        // 2.到底发送什么请求
        type:'post', // 专门指定ajax发送的请求方式
        // 3.发送的数据到底是什么
        data:{'t1':$(#t1).val(), 't2':$('#t2').val()},
        // 4.异步提交的任务需要通过回调函数来处理
        success:function(data){  // data形参指代的就是异步提交的返回结果
            // 通过DOM操作将内容 渲染到标签内容上
            $('#t3').val(data)
        }
    })
})

二、Ajax传json格式数据

Django后端针对json格式的数据，不会自动解析，会原封不动的放到request.body中。

# views.py
def xxx(request):
    ...
    json_bytes = request.body
    json_str = json_bytes.decode()
    json_dict = json.loads(json_str)
    ...

前端用ajax发送json'数据

$('#b1').on('click', function(){
    $.ajax({
        url:'', 
        type:'post', 
        // 1.指定contenttype参数
        contentType:'application/json',
        // 2.确保发送的数据是json格式的
        data:JSON.stringify({'t1':$('#t1').val(), 't2':$('#t2').val()}),
        success:function(data){  
            $('#t3').val(data)
        }
    })
})

三、Ajax发送文件

发送文件需要利用内置对象 Formdata

该对象既可以传普通的键值也可以传文件

# 获取input获取用户上传文件的内容
// 1.先通过jquery查找到该标签
// 2.将jquery对象转换成原生的js对象
// 3.利用原生js对象的方法，直接获取文件内容

$('#b1').click(function(){
    // 1.先生成一个formdata对象
    var myFormData = new FormData();
    // 2.朝对象中添加普通的键值
    myFormData.append('username', $('#t1').val());
    myFormData.append('password', $('#t2').val()):
    // 3.朝对象中添加文件数据
    myFormData.append('myfile', $('#t3')[0].files[0]);
    $.ajax({
        url:'',
        type:'post',
        data:myFormData, // 直接丢对象
        // ajax传文件，一定要指定两个关键性的参数
        contentType:false, // 不用任何编码，因为formdata对象自带编码
        processData:false, // 告诉浏览器不要处理该数据
        
        success:function(data){
            alert(data)
        }
    })
})

ajax传文件需要注意的事项：

1.利用Formdata对象，能够简单的快速传输数据(普通键值 + 文件)

2.有几个参数

data:Formdata对象
contentType:false
processType:false

四、Ajax请求如何设置csrf_token

在Django中只要是POST请求，都必须要校验csrf_token来防伪跨站请求。

方式一：

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

方式二：

百度

Django中使用Ajax

一、Ajax的应用:

二、Ajax传json格式数据

三、Ajax发送文件

四、Ajax请求如何设置csrf_token

猜你喜欢