Django后端之ajax

• 1 > ajax简介
• • 1.1 > 案例学习
• 2 > 前后端传输数据编码格式
• • 2.1 > form表单默认发送的编码格式
  • 2.2 > form表单发送文件
  • 2.3 > ajax默认的编码格式
• 3 > ajax发送json格式数据
• 4 > ajax携带文件数据

   ajax的作用就是可以在页面不刷新的情况下，实现与后端进行数据交互。其中它的重点就是一个异步提交和局部刷新的这么一个机制。例如:码云用户注册无需点击按钮内部也可完成数据交互。

   ajax不是一门全新的知识，本质就是一些js代码。我们学习ajax直接使用jQuery封装之后的版本（语法更加的简单）使用ajax的前提必须要引入jQuery文件。

   学习ajax一定要能够发现与form表单提交数据的区别。

	ajax提交数据页面不用刷新 原始数据还在 处理数据的过程中不影响页面其他的操做
	form表单提交数据页面刷新 原始数据不在 并且处理数据的过程中无法做其他操做
	

   页面上有 三个input框和一个提交按钮 前俩个框输入数字 点击按钮最后一个框里面展示数字的和，并且页面不能刷新。具体操做如下：

	请求体中携带编码格式
		Content-Type:...
	django针对不同编码方式对应的数据格式会采用不同的处理策略

	请求体中携带编码格式
		Content-Type: application/x-www-form-urlencoded
		
  	数据格式:
  		username=jason&password=123
  		
  	django后端会自动处理到:
  		request.POST

	
	请求体中携带编码格式
		Content-Type: multipart/form-data
		
  	数据格式:
  		隐藏不让看
  		
  	django后端会自动处理到:
  		request.POST  request.FILES

	请求体中携带编码格式:
		Content-Type: application/x-www-form-urlencoded

	数据格式:
		username=jason&password=123

	django后端会自动处理到:
		request.POST
		

   form表单是无法发送json格式数据的!!!
   ajax发送的数据类型一定要跟数据的编码格式一致

	
	编码格式是urlencoded 
	数据格式就应该是username=jason&password=123
	但是你却发送了json格式数据

   django后端争对json格式的数据不会做任何的处理 就在request.body内
需要我们自行处理。

	$('#d1').click(function () {
        $.ajax({
            url:'',
            type:'post',  // 不写默认也是get请求
            contentType:'application/json',  // 不写默认是urlencoded编码
            data:JSON.stringify({'name':'jason','pwd':123}),  // 序列化方法
            success:function (args) {
            }
        })
    })

	def add(request):
	    if request.method =='POST':
	        print(request.POST)
	        print(request.body)
	        json_bytes = request.body
	        json_dict = json.loads(json_bytes)
	        print(json_dict)
	        print(json_dict.get('name'))
    return render(request, 'add.html')

	$("#d1").click(function () {
	        // 需要利用内置js内置对象FormData
	        let myFormData = new FormData();
	        // 对象添加普通数据
	        myFormData.append('username',$('#name').val())
	        myFormData.append('password',$('#pwd').val())
	        // 对象添加文件数据
	        myFormData.append('my_file',$('#file')[0].files[0])
	        // 发送ajax请求
	        $.ajax({
	            url:'',
	            type:'post',
	            data:myFormData,
	            // 携带文件必须要指定的两个参数
	            contentType:false,
	            processData:false,
	            success:function (args) {
	                // 处理异步回调返回的结果
	            }
	        })
	    })