• 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的静态文件中新建一个js文件然后在使用Ajax页面引入即可
    js文件代码如下:

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');
    
    
    
    function csrfSafeMethod(method) {
      // these HTTP methods do not require CSRF protection
      return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    
    $.ajaxSetup({
      beforeSend: function (xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
          xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
      }
    });
    
  • 相关阅读:
    个人技术博客(α)
    git常用命令合集
    软件工程实践2017第二次结对作业
    软件工程实践2017第一次结对作业
    软件工程实践2017第二次作业
    软件工程实践2017第一次作业
    学习总结
    约瑟夫
    今天是星期几
    斐波那契数列取石子游戏
  • 原文地址:https://www.cnblogs.com/17vv/p/11755351.html
Copyright © 2020-2023  润新知