django 中的 ajax

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