[JavaScript知识库]前后端交互

ajax

• 朝后端发送请求的方式：

• ajax的请求格式：

$.ajax({
	url:'', 	<!-- 不写即朝当前地址提交 -->
	type:'post',	<!-- 不指定默认get请求 -->
	data:{'d1':$('#d1').val()},
	dataType:true,		<!-- 自动反序列化json格式的数据  -->
	success:function(args){
		alert(args)
		
	}
})

后端返回json格式数据：

from django.http import JsonResponse

return JsonResponse(dic)

前后端传输数据的编码格式

• Get请求：url?username=zhang&password=123456
• Post请求：urlencoded、formdata、json三种编码格式，form、ajax两种传输方式

一定要说发什么格式的数据，就发什么格式的数据

request对象方法补充：

1. request.is_ajax()判断当前请求是否是ajax请求
2. json.loads()括号内如果传入了一个二进制格式的数据，那么内部将自动解码再反序列化

# 前端
$('#d3').on('click', function(){
	# FormData对象既可以添加普通键值对，也可添加文件对象
	let formDataObj = new FormData();
	# 普通键值对
	formDataObj.append('username', $('#d1').val())
	# 文件对象
	formDataObj.append('myfile',$('d2')[0].files[0])
	# 将对象基于ajax发送
	$.ajax({
		url:'',
		type:'post',
		data:formDateObj,
		# ajax发送文件必须指定的两个参数
		contentType:false, # 不需要使用任何编码，django可以自动识别formdata对象，并将数据封装到request对象的POST与FILES中
		processData:false, # 告知浏览器不要对数据进行任何处理
		success:function(args){
			
		}
	})
})


# 后端
def func():
	if request.is_ajax():
		if request.method == 'POST':
			print(request.POST)
			print(request.Files)
	return render(request, 'index.html')

django自带的序列化组件

from django.core import serializers
user_queryset = models.User.objects.all()
res = serializers.serialize('json', user_queryset)

一些小点

• 前端利用{% for i in dic %}生成的表格，若要添加删除按钮，可以给删除按钮添加自定义属性delete_id={{ obj.pk }}，这样就可以方便的绑定删除函数了
• sweetalert的二次确认弹框，汉字太大的解决方法，找到显示不完全的汉字，查看css属性，加个padding-top:10px即可