Ajax

• Ajax
  • Content-Type
  • ajax携带文件数据

Ajax

异步提交 局部刷新
ajax不是一门新的技术并且有很多版本 我们目前学习的是jQuery版本(版本无所谓 本质一样就可以)
	

基本语法
"注意 获取数据值应放在事件内部"

   $('#d2').blur(function () {
        // 1.先获取两个框里面的数据
        let v1Val = $('#d1').val();
        let v2Val = $('#d2').val();
        // 3.发送ajax请求
        $.ajax({
            url:'',  		// 后端地址 三种填写方式 与form标签的action一致
            type:'post',    // 请求方式 默认也是get
            data:{'v1':v1Val, 'v2':v2Val},  // 发送的数据
            success:function (args) {  // 后端返回结果之后自动触发 args接收后端返回的数据
                $('#d3').val(args)
            }
        })
    })

Content-Type

1.urlencoded     /视图中获取 request.POST
	ajax默认与form表单的编码格式
	数据格式  xxx=yyy&uuu=ooo&aaa=kkk
 	django后端会自动处理到request.POST中
    
2.formdata      /视图中获取 request.FILES
	django后端针对普通的键值对还是处理到request.POST中 
   针对文件会处理到request.FILES中
	
    
3.application/json  /视图中获取 request.body  # 发送json格式数据
	form表单不支持jaon格式 ajax可以
	<script>
    $('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:JSON.stringify({'name':'jason','age':18}),  // 必须添加JSON.stringify 不要直接写个字典骗人
            contentType:'application/json',  
            success:function (args) {
                alert(args)
            }

        })
    })
</script>
	后端需要从request.body中获取并自己处理

ajax携带文件数据

<script>
    $('#d3').click(function () {
        // 1.先产生一个FormData对象
        let myFormDataObj = new FormData();
        // 2.往该对象中添加普通数据
        myFormDataObj.append('name', 'jason');
        myFormDataObj.append('age', 18);
        // 3.往该对象中添加文件数据
        myFormDataObj.append('file', $('#d2')[0].files[0])
        // 4.发送ajax请求
        $.ajax({
            url:'',
            type:'post',
            data:myFormDataObj,

            // ajax发送文件固定的两个配置
            contentType:false,
            processData:false,
            success:function (args){
                alert(args)
            }

        })
    })
</script>