010---Django与Ajax

预备知识：
    什么是Json?

    定义：json是一种轻量级的数据交换格式。
        如果我们要在不同的编程语言中传递对象，就必须把对象序列化为标准格式，比如XML,但那是以往的时代，现在大多数使用序列化为json，因为json本身就是一个字符串，层次清晰，易阅读可以被所有语言读取，也方便的存储到磁盘和网络传输。
    格式：一个无序的key:value集合。{"k1":"v1","k2":"v2"}

    在程序运行过程中。所有的变量都是存在内存中。一旦程序结束，变量也会被销毁。
    所以：
        序列化：我们把变量从内存中变成可存储或者可传输的过程称为序列化
        反序列化：把变量内容从序列化的对象重新读取到内存里称为反序列化

    在js里面有两个常用方法实现json字符串和json对象互转

    json对象---json字符串
        JSON.stringify():
        console.log(JSON.stringify({'name':'xjm'));

    json字符串---js对象
        JSON.parse()
        console.log(JSON.parse('{"name":"xjm})');
    注意：
        json对象属性名必须是双引号
        不能使用undefined;
        不能是函数和日期对象

Ajax
    ajax：翻译成中文就是异步JavaScript和XML。就是使用JavaScript语言与服务器进行异步交互，传输的数据为xml，当然现在不只是xml，更多的是使用Json数据

    特点：
        异步交互：客户端发出一个请求后，无需等服务器响应结束，就可以发出第二个请求
        局部刷新：给用户的感受是在不知不觉中完成请求和响应过程，无需刷新整个页面

场景：
    注册的错误提示：该用户已注册、该用户名已被使用等
    百度等搜索引擎的输入框提示：输入一个python关键词后会出现一个下拉列表，这里用到了ajax技术，当输入框输入变化时，浏览器会偷偷向服务器发送一个请求，然后接收响应显示。

基于Jquery的Ajax实现

<button class="send_Ajax">send_Ajax</button>
<script>

$(".send_Ajax").click(function(){

$.ajax({
url:"/handle_Ajax/",
type:"POST",
data:{username:"Yuan",password:123},
success:function(data){
console.log(data)
},
error: function (jqXHR, textStatus, err) {
console.log(arguments);
},

complete: function (jqXHR, textStatus) {
console.log(textStatus);
},

statusCode: {
'403': function (jqXHR, textStatus, err) {
console.log(arguments);
},

'400': function (jqXHR, textStatus, err) {
console.log(arguments);
}
}
})
})
</script>

$.ajax()参数

    请求参数：
        url:请求路径
        type:请求类型，默认get
        data:{a:1,b:2}  ajax默认get请求  默认urlencoded编码类型提交数据  /?a=1&b=2
        processData:声明当前的data数据是否进行转码或预处理  默认True
        contentType:发送数据时的编码类型
　　

　　请求头ContentType
    　　是指请求体的编码类型，常见的有三种：

　　　　1、application/x-www-form-urlencoded

    　　最常见的post提交数据的方式，form表单如果不设置enctype属性，那么默认就是这种方式提交

   　　 POST http://www.123@qq.com HTTP:/1.1
  　　  Content-Type:application/x-www-form-urlencoded;charset=utf-8

       username=jzy&age=22
　　　2　、multipart/form-data
   　　 这也是一个常见的post提交数据的方式。我们使用表单上传文件时，必须在form中添加enctype=multipart/form-data/

    　　Content-Disposition: form-data; name="file"; filename="chrome.png"
   　　 Content-Type: image/png

　　3、application/json
    　　这个作为响应头大家应该不陌生，但是现在越来越多的人把它作为请求头。用来告诉服务端消息主体是序列化后的json字符串。

响应参数：
        dataType:预期服务端返回的数据类型，服务端返回的数据会根据这个值解析后，传递给回调函数。

csrf跨站请求伪造

data:{
"csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val();
}

$.ajax({
headers:{"X-CSRFToken":$.cookie('csrftoken')}
})

基于form表单的文件上传

模板部分：
<form action="" method="post" enctype="multipart/form-data">
用户名 <input type="text" name="user">
头像 <input type="file" name="avatar">
<input type="submit">
</form>
视图部分：
def index(request):
print(request.body)   # 原始的请求体数据
print(request.GET)    # GET请求数据
print(request.POST)   # POST请求数据
print(request.FILES)  # 上传的文件数据

return render(request,"index.html")

基于Ajax的文件上传

模版部分
<h3>基于Ajax文件上传</h3>
<form>
用户名：<input type="text" id="user">
密码：<input type="password" id="pwd">
<p>头像：<input type="file" id="head_imgurl"></p>
<!--input 的type类型一定不能是submit-->
<input type="button" value="Json" class="json按钮">
<input type="button" value="Ajax" class="ajax按钮">
</form>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>

//发送json数据
$('.json').click(function () {
$.ajax({
url: '',
type: 'post',
contentType: 'application/json',
data: JSON.stringify({
a: 1,
b: 2
}),
success: function (data) {
console.log(data)
}
})
});

//ajax文件上传
$('.ajax').click(function () {
var formdata=new FormData();
formdata.append("user",$('#user').val());
formdata.append("pwd",$('#pwd').val());
formdata.append("head_imgurl",$('#head_imgurl')[0].files[0])
$.ajax({
url:'',
type:'post',
contentType:false,  // 不设置内容类型
processData:false,  // 不处理数据
data:formdata,
success:function (data) {
console.log(data);
}
})
})
</script>
视图部分
def file_put(request):
if request.method == 'POST':
print(request.body)  # 请求报文
print(request.POST)  # 只有请求头是urlencoded时，才有数据

# data = request.body.decode('utf-8')
# import json
# print(json.loads(data).get('a'))
# print(json.loads(data).get('b'))

# user = request.POST.get('user')

# 获取文件对象
file_obj = request.FILES.get('head_imgurl')

# 文件名称：file_obj.name
with open(file_obj.name,'wb') as f:
for line in file_obj:
f.write(line)
return HttpResponse('ok')

return render(request,'file_put.html')