ajax扫盲（另带跨域解决）

1. 前提知识：js的序列化：
   • JSON.stringify() 序列化 JSON.parse() 反序列化
   • load:href重定向
2. 用JS技术发送请求和接受响应的。
   1. 异步 不需等待每次数据的返回
   2. 局部刷新
   3. 传输的数据量少

12.12.1 jquery发送ajax请求

$.ajax({
	url:'/calc/',
	type:'post',
    datatype:"JSON",  //必须接收客户端发来的格式是json格式 不然不接受
	data:{
	a:$("[name=i1]").val(),
	b:$("[name=i2]").val(),
},
    success:function(res){
        $("[name='i3']").val(res)
    },
    error:function(error){
        console.log(error)
    }
})

12.12.2 上传文件示例

<input type="file" id="f1">
<button id="b1">上传</button>   #不能够有表单提交

$('#b1').click(function () {
        var  formobj =  new FormData();

        formobj.append('file',document.getElementById('f1').files[0]);
        // formobj.append('file',$('#f1')[0].files[0]);
        formobj.append('name','alex');

        $.ajax({
            url: '/upload/',
            type: 'post',
            data:formobj ,
            processData:false,  // 不需要处理数据的编码  防止变成urlencode
            contentType:false,  // 不需要处理content-type请求头
            success: function (res) {   // success:(res) =>{}这种方式不改变this指向
                $("[name='i3']").val(res)
            },
        })
    })

12.12.3 ajax通过csrf的校验

1. 前提条件：确保有csrftoken的cookie

   • 打开中间件
   • 加装饰器 ensure_csrf_cookie

2. data加csrf

   1. 给data中添加csrfmiddlewaretoken的键

   data: {
       'csrfmiddlewaretoken':$('[name="csrfmiddlewaretoken"]').val(),
       a: $("[name='i1']").val(),
       b: $("[name='i2']").val(),
   },  //指向{% csrf_token %}
   
   

   2. 加请求头

   headers:{
       'x-csrftoken':$('[name="csrfmiddlewaretoken"]').val(),
   },
   
   

   3. 使用文件
      • 从cookie中获取csrftoken然后加入到请求头，类似于第二种情况的。

12.12.4 同源策略和跨域

• 什么是同源策略？

  • 是浏览器的行为。不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。
  • 如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。

• 跨域：指协议，域名，端口都要相同，其中有一个不同都会产生跨域；

• 如何解决跨域问题

  • 比较主流的：cors，即设置响应头

  #跨域的问题主要报错是脚本向另一个服务器发请求的返回过程中发生的
  def api(request):
      ret =  HttpResponse('百度')
      ret['Access-Control-Allow-Origin'] = "*"  #添加个请求头，这样浏览器就不会拦截
      return ret
  

  • jsonp
    • 原理是浏览器只会拦截ajax类的请求，不会拦截src类的图片请求，伪装src可以获得数据
  • 请求方式只能是get请求

  #jsonp只能发get请求
  def api(request):
      func_name = request.GET.get('callback')  
      return HttpResponse('%s("百度")' %func_name)
  

  • 发送请求的脚本

      <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
      <script>
  	       function sendMsg2() {
              var tag = document.createElement('script');
              tag.src = 'http://127.0.0.1:9000/api/?callback=f1'; //端口不同 会跨域 这里是在当前页面的head 创建一个 <script src="请求的链接"></script> 的请求
              document.head.appendChild(tag);
              document.head.removeChild(tag);
          }
  
          function f1(arg) {   //上述的请求会直接走这里   
              console.log(arg);
          }
  </script>