Ajax发送数据

发布时间 2023-11-03 20:48:59作者: PiggThird

ajax发送json格式数据(contentType)

"""
前后端传输数据的时候一定要确保编码格式跟数据真正的格式是一致的
不要骗人家!!!

{"username":"jason","age":25}  
	在request.POST里面肯定找不到
	
	django针对json格式的数据 不会做任何的处理 
	
request对象方法补充
	request.is_ajax()
		判断当前请求是否是ajax请求 返回布尔值
"""

<script>
    $('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',
            data:JSON.stringify({'username': 'tiger', 'age': 18}),	# 用JSON格式的字符串
            dataType:'JSON',
            contentType:'application/json',  // 指定编码格式  # 这里需要指定!!!
            success:function () {

            }
        })
    })
</script>

# 注意:django后端针对json格式的数据不会做任何的处理,你需要自己去 request.body 中获取原生的二进制数据自己处理
"""
1.解码
2.反序列化

(json.loads能够自动先解码再反序列化)
"""
def ab_json(request):
    if request.is_ajax():
        # print(request.is_ajax())
        # print(request.POST)
        # print(request.FILES)
        # 针对json格式需要你手自己动处理
        # print(request.body)  # b'{"username":"tiger","age":18}'
        json_body = request.body

        # 方式一:清晰但是繁琐
        # json_str = json_body.decode('utf-8')
        # json_dict = json.loads(json_str)

        # 方式二:
        # json.loads括号内如果传入了一个二进制格式的数据那么内部会自动解码再反序列化
        json_dict = json.loads(json_body)
        print(json_dict, type(json_dict))    # {'username': 'tiger', 'age': 18}
    return render(request, 'ab_json.html')

"""
ajax发送json格式数据需要注意点
	1.contentType参数指定成:application/json
	2.数据是真正的json格式数据
	3.django后端不会帮你处理json格式数据需要你自己去 request.body 获取并处理
"""

ajax发送文件

"""
ajax发送文件需要借助于js内置对象FormData
"""
<script>
    // 点击按钮朝后端发送普通键值对和文件数据
    $('#d4').on('click', function (){
        // 1 需要先利用FormData内置对象
        let formDataObj = new FormData();
        // 2 添加普通的键值对
        formDataObj.append('username', $('#d1').val());
        formDataObj.append('password', $('#d2').val());
        // 3 添加文件对象
        formDataObj.append('myfile', $('#d3')[0].files[0]);		# 文件的固定写法!!!
        // 4 将对象基于ajax发送给后端
        $.ajax({
            url:'',
            type:'post',
            data:formDataObj,  // 直接将对象放在data后面即可
			
            # 两个关键参数
            // ajax发送文件必须指定的两个参数
            contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象
            processData:false,  // 告诉你的浏览器不要对你的数据进行任何处理

            success:function (args){

            }
        })
    })
</script>

def ab_file(request):
    if request.is_ajax():
        if request.method == 'POST':
            print(request.POST)
            print(request.FILES)
    return render(request,'ab_file.html')

"""
总结:
    1.需要利用内置对象FormData
    	// 1 需要先利用FormData内置对象
        let formDataObj = new FormData();
        // 2 添加普通的键值对
        formDateObj.append('username',$('#d1').val());
        formDateObj.append('password',$('#d2').val());
        // 3 添加文件对象
        formDateObj.append('myfile',$('#d3')[0].files[0])
    
    2.需要指定两个关键性的参数
        contentType:false,  // 不需使用任何编码 django后端能够自动识别formdata对象
        processData:false,  // 告诉你的浏览器不要对你的数据进行任何处理
    
    3.django后端能够直接识别到formdata对象并且能够将内部的普通键值自动解析并封装到request.POST中 文件数据自动解析并封装到request.FILES中
"""