django 中的 ajax

(Asynchronous Javascript And XML )

特点:  异步  页面局部刷新  传递的数据量小

ajax 请求返回数据 重定向 location.href='/index/'

1. 发请求的途径
   1. a标签 GET
   2. form表单 GET /POST
   3. 地址栏中输入地址回车 GET
2. ajax
   1. 使用js的技术发请求的一个方式
   2. 特点： 异步 页面局部刷新 传输的数据量小

3. 参数
   $.ajax({
   url: '/ajax_test/', # 请求的地址
   type: 'post', # 请求的方式
   data: { # 请求的数据
   name: 'alex',
   age: '73',
   hobby: JSON.stringify(['吃烧饼', '画大饼', '卖烧饼'])
   },
   success: function (res) { # 正常响应的回调函数
   $('[name="ii3"]').val(res)
   },
   error:function (res) { # 错误响应的回调函数
   console.log(res)
   }
   })

4. 上传文件

   $('#b1').click(function () {
   var form_obj = new FormData();
   form_obj.append('f1',$('[name="f1"]')[0].files[0])

    $.ajax({
        url:'/upload/',
        type:'post',
        processData:false,   #  不需要处理数据编码格式
        contentType:false,   #  不需要处理请求头
        data:form_obj,
        success:function (res) {
            alert(res)
        }
    })

   })

   # 视图中
   def upload(request):
   if request.is_ajax():
   file_obj = request.FILES.get('f1')
   with open(file_obj.name, 'wb') as f:
   for chunk in file_obj.chunks(): # chunks() 以片段的形式获取 去每一个片段
   f.write(chunk)
   return HttpResponse('上传成功')

    return render(request, 'upload.html')

ajax可以提交POST请求的方式

1. 页面中使用{% csrf_token %}，给POST提交数据中添加csrfmiddlewaretoken的键值对
   data: {
   'csrfmiddlewaretoken': $('[name="csrfmiddlewaretoken"]').val(),
   i1: $('[name="i1"]').val(),
   i2: $('[name="i2"]').val()
   },

2. 添加X-csrftoken的请求头
   headers:{
   'X-csrftoken': $('[name="csrfmiddlewaretoken"]').val(),
   },

3. 写文件 定义一个js 文件 ajax_setup.js
   从cookie中获取值，添加到请求头中。
   必须确保有csrftoken的cookie
   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);
       }
     }
   });

转载于:https://www.cnblogs.com/zhang-zi-yi/p/10187728.html