Ajax
1、Ajax基本简介
Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的 XMLHttpRequest。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。
尽管X在Ajax中代表XML, 但由于JSON的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。
Ajax精髓所在即异步提交，局部刷新
2、Ajax的基本使用
<!--创建一个button按钮-->
<button class="btn btn-danger" id="b1">点击</button>
<script>
$('#b1').click(function () {
$.ajax({
url:'', // 不写默认向当前地址发送请求
type:'post', // 请求类型
data: // 向后端发送的数据
success:function(res){
res // 后端返回的数据
}
})
})
</script>
3、数据传输格式
# post请求数据的编码格式
"""
get请求数据忽视直接放在url后面的
url?username=kk&password=123
"""
# 可以向后端发送post请求的方式
"""
from
ajax
"""
"""
前后端传输数据的编码格式
urlencoded
formdata
json
"""
# 1、from表单
<form action="" method="post" enctype="multipart/form-data"> # enctype修改编码格式，默认urlencoded
默认的数据的编码格式：urlencoded
数据格式：username=kk&passwoed=123
django后端针对符合urlencoded编码格式的数据会自动解析封装到reques中。
username=kk&passwoed=123 >>> request.POST
更改编码格式：multipart/form-data
针对普通的编码键值对还是封装到request.POST中，而将文件解析到request.FILES中
from表单数没有办法发送json编码格式
# 2、ajax
默认数据格式：urlencoded
数据格式：username=kk&passwoed=123
django后端针对符合urlencoded编码格式的数据会自动解析封装到reques中。
username=kk&passwoed=123 >>> request.POST
4、Ajax发送json数据
"""
前后端传输数据的格式一定要确保编码格式跟数据真正的格式是一致的。
{"username":"kk","password":"123"}
在request.POST中肯定找不到
Django在针对json格式的数据 不会做任何处理
request对象方法：
request.is_ajax()
按断当前请求格式是否是ajax请求，返回布尔值
"""
# 前端
<button class="btn btn-danger" id="d1">点击</button>
<script>
$('#d1').click(function () {
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'username':'kk', 'password': 234}), // 数据转换为json格式
contentType:'application/json', // 此参数默认不写就是urlencoded,指定哪个就是哪个
success:function () {
}
})
})
</script>
# 针对前端发送过来的json格式数据需要自己手动处理
json_bytes = request.body # 获取前端传送过来的二进制格式数据
json_str = json_bytes.decode('utf-8') # 解码为字符串类型
json_dict = json.loads(json_str) # 转为字典
"""
json.loads()括号内如果传入一个二进制格式的数据那么内部会自动解码在反序列化
"""
json_dict = json.loads(json_bytes) # 直接解码在反序列化
"""
ajax发送JSON格式数据需要注意点
1、contentType参数指定：application/json
2、数据是真正的JSON格式数据
3、Django后端不会自动处理JSON格式数据，需要自己request.body获取并处理
"""
5、Ajax发送文件数据
"""
ajax发送文件，需要JS内置对象：FormData
"""
# 前端
<p>username: <input type="text" id="d1" ></p>
<p>password: <input type="text" id="d2" ></p>
<p>文件: <input type="file" id="d3" ></p>
<button class="btn btn-info " id="d4">点击</button>
<script>
$('#d4').on('click', function () {
// 1、需要先利用FormData内置对象
let formDataObj = new FormData();
// 2、添加普通键值对
formDataObj.append('username',$('#d1').val())
formDataObj.append('password',$('#d2').val())
// 3、添加文件对象
formDataObj.append('myfile', $('#d3')[0].files[0])
// 4、将对象基于ajax发送给后端
$.ajax({
url:'',
type:'post',
data:formDataObj, // 直接添加文件对象即可
// ajax发送文件必须指定的两个参数
contentType:false, // 不需要任何编码，Django后端能够自动识别formdata对象
processData: false // 使浏览器不要对数据做任何处理
success:function (args) {
}
})
})
# 后端
def ab_file(request):
if request.is_ajax():
if request.method == 'POST':
print(request.POST)
print(request.FILES)
return render(request, 'ab_file.html')
"""
总结：
需要利用内置对象FormData
// 1、需要先利用FormData内置对象
let formDataObj = new FormData();
// 2、添加普通键值对
formDataObj.append('username',$('#d1').val())
formDataObj.append('password',$('#d2').val())
// 3、添加文件对象
formDataObj.append('myfile', $('#d3')[0].files[0])
需要两个指定的关键性参数
// ajax发送文件必须指定的两个参数
contentType:false, // 不需要任何编码，Django后端能够自动识别formdata对象
processData: false // 使浏览器不要对数据做任何处理
Django后端能够直接识别到FormData对象并且能够将内部普通键值对自动解析并封装到request.POST中
文件数据自动解析并封装到request.FILES中
"""
beforeSend
success
complete
error
