jQuery Ajax
Ajax介绍
Ajax能够在不刷新页面的情况下发送并接受后端数据。
是现在Web开发中大量使用的一种技术。
这里介绍一下jQuery中的Ajax。
数据格式
在前后端交互中，总共有三种格式。不同的格式对应后端不同的框架中有不同的处理方式，这里以Django为例。
如果要查看你发送数据的格式，可在请求头中有一个Content-Type中进行查看。
urlencoded
urlencoded是默认的编码格式，不论是使用form表单，或者是ajax。
当你使用此种编码格式时，将不能上传文件，并且数据格式为username=xxx&password=xxx。
在Django中，会将此种编码格式存放至响应的请求方式中，如request.GET/request.POST。
multipart/form-data
multipart/form-data允许上传文件，在Django中将会把文件放在request.FILES中，而其他数据则会放在request.POST中。
注意：multipart/form-data只能由POST进行上传。
application/json
json格式常见于ajax发送请求中，特别是前后端分离项目。这种格式非常常见，而后端如果是使用Django，那么Django会将数据保存在request.body中。
并且我们可以在视图函数中使用request.is_ajax()方式来判断，前端是不是发送的json格式数据。
import json
if request.is_ajax():
data = request.body
json.loads(data)
基本使用
jQuery中封装的Ajax使用十分便捷，以下操作将演示如何发送Ajax请求并且让后端返回相应的数据。
注意事项
1.前端传递参数中，不允许出现对象嵌套的形式。如
{"k1":{"k1-1":v1}}2.如果前端传递的是一个
Array，如{"k1":[1,2,3,4]}则需要添加一个属性traditional:true，否则后端将接收不到该参数。（实际上接受的时候要使用request.POST.get("k1[]")）来进行接受，这是有问题的。
<QueryDict: {'k1[]': ['1', '2', '3', '4']}>。
$.ajax({
url: "//127.0.0.1:8000/", // 发送的路径
type: "post", // 发送方式
dataType: 'JSON', // 反序列化
data:{v1,v2}, // 发送的数据
success: (res) => { // 成功获取到后端返回结果的回调函数
res_ele.value = res;
},
error:()=>{ // 发送失败的回调函数
console.log("失败");
}
})
<body>
<p><input type="text"></p>
<p><input type="text"></p>
<p><input type="text" readonly style="background-color: #eee;"></p>
<p><button type="button">提交</button></p>
</body>
<script src='//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
window.onload = (() => {
document.querySelector("button").addEventListener("click", (ele) => {
let v1 = document.querySelectorAll("input")[0].value;
let v2 = document.querySelectorAll("input")[1].value;
let res_ele = document.querySelectorAll("input")[2];
$.ajax({
url: "//127.0.0.1:8000/", // 发送的路径
type: "post", // 发送方式
dataType: 'JSON', // 反序列化
data:{v1,v2}, // 发送的数据
success: (res) => { // 成功获取到后端返回结果的回调函数
res_ele.value = res;
},
error:()=>{ // 发送失败的回调函数
console.log("失败");
}
})
})
})
</script>
def test(request):
if request.method == "POST":
v1 = request.POST.get("v1")
v2 = request.POST.get("v2")
res = int(v1) + int(v2)
return JsonResponse(res,safe=False)
return render(request,"base.html",locals())
发送Json
如果前端要发送JSON格式的数据，则需要声明数据格式为JSON。
$.ajax({
url: "//127.0.0.1:8000/", // 发送的路径
type: "post", // 发送方式
dataType: 'JSON', // 反序列化
data:JSON.stringify({"name":"Yunya","age":18}), // 发送的数据，注意，这里一定要序列化，因为已经声明了。
contentType:'application/json', // 声明发送数据格式
success: (res) => {
console.log(res);
},
error:()=>{
console.log("失败");
}
})
注意：Django会将json格式的数据存放进request.body中。
import json
def test(request):
if request.method == "POST":
if request.is_ajax():
data = json.loads(request.body) // 直接反序列化
return JsonResponse("ok",safe=False)
return render(request,"base.html",locals())
发送文件
通过Ajax发送发送文件，需要借助FormData对象。
此外还要注意两点：
1.
contentType:false// 不使用任何数据格式，任何编码2.
processData:false// 不让浏览器做任何处理
<body>
<form action="">
<p><input type="text" name="username"></p>
<p><input type="text" name="password"></p>
<p><input type="file" name="userfile"></p>
<p><button type="button">提交</button></p>
</form>
</body>
<script src='//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
window.onload = (() => {
document.querySelector("button").addEventListener("click", (ele) => {
let username = document.getElementsByName("username")[0].value;
let password = document.getElementsByName("password")[0].value;
// 获取文件对象
let userfile = document.getElementsByName("userfile")[0].files[0];
// FormData用于伪造form表单提交的数据
let FormDataObj = new FormData()
FormDataObj.append("username",username)
FormDataObj.append("password",password)
FormDataObj.append("userfile",userfile)
$.ajax({
url: "//127.0.0.1:8000/",
type: "post",
dataType: 'JSON',
data:FormDataObj,
contentType:false, // 不做任何编码处理
processData:false, // 浏览器不要影响数据
success: (res) => {
console.log(res);
},
error:()=>{
console.log("失败");
}
})
})
})
</script>
def test(request):
if request.method == "POST":
msg = {
"username":request.POST.get("username"),
"password":request.POST.get("password"),
"userfile":request.FILES.get("userfile"),
}
print(msg)
# {'username': 'Yunya', 'password': '123', 'userfile': <InMemoryUploadedFile: django-orm单表练习.gif (image/gif)>}
return JsonResponse("ok",safe=False)
return render(request,"base.html",locals())
表单选项
如果要获取某个表单下的所有选项，则可使用以下的方法。
示例如下：
$.ajax({
data:$("#fm表单id").seriallze(), // 获取表单下所有选项 这是jQuery提供的方法
})
<body>
<form action="" id="f1">
<p><input type="text" name="username"></p>
<p><input type="text" name="password"></p>
<button type="button">提交</button>
</form>
</body>
<script src='//cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
window.onload = (() => {
document.querySelector("button").addEventListener("click", (ele) => {
$.ajax({
url: "//127.0.0.1:8000/",
type: "post",
dataType: 'JSON',
data:$("#f1").serialize(),
success: (res) => {
console.log(res);
},
error:()=>{
console.log("失败");
}
})
})
})
</script>
def test(request):
if request.method == "POST":
print(request.POST)
# <QueryDict: {'username': ['Yunya'], 'password': ['123']}>
return JsonResponse("ok",safe=False)
return render(request,"base.html",locals())
