Django's Ajax operations

Ajax

Ajax (Asynchronous JavaScript and XML), JavaScript can be understood as a request to perform an asynchronous network. Popular understanding of the word is, if there is no Ajax technology, change a small portion of the page (even if it is a line of text, a picture) will need to reload the entire page once, and then with Ajax, you can achieve on the page does not jump is not refresh the case, to submit data on the page background, part of the update page content.

Wherein the core is dependent on the XMLHttpRequest object provided by the browser, so that the browser makes an HTTP request and HTTP response received. The browser then do other things, such as XHR return to receive the data re-render the page

JQuery in Ajax

JQuery to native Ajax did a very good package, very easy, a lot of specific methods such as $.ajax，$ .post, $ .get, $ .getJSON etc. can be based on different needs to call, writing more concise, $ .ajax example to do a simple analytical, written various parameters in the following mode, you can successful Ajax request, and may use $ .post in practice, $.get Both methods use more, but to understand$ .ajax this general method can have a good understanding of the principles of encapsulation.

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

Ajax JQuery encapsulated callback, success, error, complete three is the most common:
Success: After a successful callback request
error: the callback request failed.
complete: the request is completed callback function (request are called success or failure).

complete as long as the request is complete, regardless of success or failure will call. That is if you call a success, would call complete; in turn called complete, will not necessarily call success. (Status Code 404,403,301,302 ... will enter complete, as long as no mistakes will be called)

Front and rear ends the transmission data encoding format contentType

• urlencoded
  corresponding data format: name linwowl & password 666 = =
  backend data acquisition: request.POST
  PS; urlencoded Django will automatically parse the coded data into request.POST
• formdata
  encoding format form file transfer form
  the rear end of the file format data acquisition: request.FILES
  rear common key acquired data: request.POST
• file application / json
  Ajax data transmission format json

ajax default transmission data encoding format is urlencoded. Front and rear end when transmitting data, the data correspond to the coding

Data transfer format ajax json

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

ajax transfer files

$('#d1').click(function () {
	let formdata = new FormData();
	// FormData对象不仅仅可以传文件还可以传普通的键值对
	formdata.append('name','llinwow');
	// 获取input框存放的文件
	//$('#i1')[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 with similarities and differences

• Form submission form does not support asynchronous partial refresh
• form form transport json format data do not support
• ajax form form with a default encoding format to transmit data are urlencoded

advantage:

1. Without refreshing the page, within the page communicate with the server, thus reducing the waiting time and enhance the user experience.
2. Using asynchronous communication with the server, the response is faster.
3. Some of the original server can work transferred to the client, using the client's ability to handle idle, reducing the burden on servers and bandwidth, saving space and cost of broadband leased.
4. Based on standardized and widely supported technologies without having to download plug-ins or applets.

Disadvantages :

1. Back can not operate, that is not supported by your browser's back page.
2. Support for the search engines is relatively weak.
3. Exception handling mechanism may affect the program.