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