Django 之 Ajax操作

Ajax

Ajax(Asynchronous JavaScript and XML),可以理解为JavaScript执行异步网络请求。通俗的理解的话就是，如果没有Ajax技术，改变网页的一小部分（哪怕是一行文字、一张图片）都需要重新加载一次整个页面，而有了Ajax之后，就可以实现在网页不跳转不刷新的情况下，在网页后台提交数据，部分更新页面内容。

其中最核心的依赖是浏览器提供的XMLHttpRequest对象，使得浏览器可以发出HTTP请求与接收HTTP响应。浏览器接着做其他事情，等收到XHR返回来的数据再渲染页面

JQuery中的Ajax

JQuery对原生Ajax做了很好的封装，使用起来非常简单方便,具体的很多方法如 $.ajax，$.post， $.get， $.getJSON等能根据不同需要进行调用，写法更加简洁， $.ajax为例做一个简单的解析,按照下面的模式写好各个参数,就能成功进行Ajax的请求了,可能在实际中使用 $.post， $.get 这两个方法使用比较多，但是理解 $.ajax 这个通用的方法能对封装原理有很好的认识。

 $.ajax({
 	type: //数据的提交方式：get和post
 	url: //请求地址
 	async: //是否支持异步刷新，true（异步）或 false（同步）
 	data: //需要提交的数据
 	dataType: //服务器返回数据的类型，例如xml,String,Json等
 	success:function(data){
 	} //请求成功后的回调函数,参数data就是服务器返回的数据
 	error:function(data){
 } //请求失败后的回调函数，根据需要可以不写，一般只写上面的success回调函数
 })

JQuery封装的Ajax回调函数中，success、error、complete是最常用的三个：
success：请求成功后回调函数
error：请求失败后回调函数。
complete：请求完成后回调函数 (请求成功或失败时均调用)。

complete只要请求完成，不论是成功还是失败均会调用。也就是说如果调用了success，一定会调用complete；反过来调用了complete，不一定会调用success。(状态码404、403、301、302…都会进入complete，只要不出错就会调用)

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

• urlencoded
  对应的数据格式:name=linwowl&password=666
  后端获取数据:request.POST
  ps；django会将urlencoded编码的数据解析自动放到request.POST
• formdata
  form表单传输文件的编码格式
  后端获取文件格式数据:request.FILES
  后端获取普通键值对数据:request.POST
• application/json
  ajax发送json格式数据

ajax默认传输数据的编码格式也是urlencoded。前后端传输数据时，数据与编码要一一对应

ajax传输json格式数据

$('#d1').click(function () {
	$.ajax({
		url:'',  // url参数可以不写，默认就是当前页面打开的地址
		type:'post',
		contentType:'application/json',
		data:JSON.stringify({'name':'llinwow','hobby':'study'}),
		success:function (data) {}
	})
});

ajax传输文件

$('#d1').click(function () {
	let formdata = new FormData();
	// FormData对象不仅仅可以传文件还可以传普通的键值对
	formdata.append('name','llinwow');
	// 获取input框存放的文件
	//$('#myfile')[0].files[0]
	formdata.append('myfile',$('#i1')[0].files[0]);
	$.ajax({
		url:'',
		type:'post',
		data:formdata,
		// ajax发送文件需要修改两个固定的参数
		processData:false,  // 告诉浏览器不要处理我的数据
		contentType:false,  // 不要用任何的编码，就用我formdata自带的编码格式，django能够自动识别改formdata对象
		// 回调函数
		success:function (data) {
			alert(data)
		}
	})
});

form表单与ajax异同点

• form表单不支持异步提交局部刷新
• form表单不支持传输json格式数据
• form表单与ajax默认传输数据的编码格式都是urlencoded

优点：

1. 页面无刷新，在页面内与服务器通信，减少用户等待时间，增强了用户体验。
2. 使用异步方式与服务器通信，响应速度更快。
3. 可以把一些原本服务器的工作转接到客户端，利用客户端闲置的能力来处理，减轻了服务器和带宽的负担，节约空间和宽带租用成本。
4. 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

1. 无法进行操作的后退，即不支持浏览器的页面后退。
2. 对搜索引擎的支持比较弱。
3. 可能会影响程序中的异常处理机制。