Ajax
AJAX简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
基本操作
做一个页面，点击提交后，页面不刷新
后端代码：
def test_func(request):
if request.method == 'POST':
v1 = request.POST.get('v1')
v2 = request.POST.get('v2')
sum = int(v1) + int(v2)
return HttpResponse(sum)
return render(request, 'test.html')
前端代码：
<body>
<input type="text" id="d1"> + <input type="text" id="d2"> = <input type="text" id="d3">
<button id="subBtn">提交</button>
<script>
// 1. 给按钮绑定点击事件
$('#subBtn').click(function () {
// 2. 先获取等式左侧两个数据
let v1Val = $('#d1').val();
let v2Val = $('#d2').val();
// 3.发送ajax请求
$.ajax({
url:'', // 填写后端地址，三种填写方式，与form标签的action一样
type:'post', // 请求方式，默认是get
data:{'v1':v1Val, 'v2':v2Val}, // 发送给后端的数据
success:function (args) { // 后端返回结果之后自动触发success，args接收后端返回的数据
$('#d3').val(args)
}
})
})
</script>
做成失去焦点事件：
<input type="text" id="d1"> + <input type="text" id="d2"> = <input type="text" id="d3">
<button id="subBtn">提交</button>
<script>
// 1. 给按钮绑定点击事件
$('#d2').blur(function () {
// 2. 先获取等式左侧两个数据
let v1Val = $('#d1').val();
let v2Val = $('#d2').val();
// 3.发送ajax请求
$.ajax({
url:'', // 填写后端地址，三种填写方式，与form标签的action一样
type:'post', // 请求方式，默认是get
data:{'v1':v1Val, 'v2':v2Val}, // 发送给后端的数据
success:function (args) { // 后端返回结果之后自动触发success，args接收后端返回的数据
$('#d3').val(args)
}
})
})
</script>
Content-type
Content-type指的是数据编码格式
urlencoded
ajax默认的数据编码格式/form表单默认数据编码格式
数据格式： xxx=yyy&iii=jjj
django收到上述格式的数据，会自动处理到request.POST中
formdata 在form表单中由enctype定义，使用form-data后，可以发送键值对数据也可以发送文件了
<form action="" method="post" enctype="multipart/form-data"></form>
django收到上述格式的数据，会自动处理到request.FILES（文件类型）和request.POST中（普通键值对）
application/json
form表单不支持，仅限ajax
使用ajax发送json格式数据
后端代码：
def test_func(request):
if request.method == 'POST':
print(request.body) # json格式需要使用request.body接收，为二进制格式
import json
res = json.loads(request.body) # 处理二进制json数据
print(res)
return render(request, 'test.html')
前端代码：
<button id="d1">发送json格式数据</button>
<script>
$('#d1').click(function () {
$.ajax({
url:'',
type:'post',
data:JSON.stringify({'name': 'Jerry', 'age': 5}), // 序列化成json格式数据
contentType:'application/json', // 指定发送数据编码格式
success:function (args){
alert(args)
}
})
})
ajax发送携带文件格式数据
前端代码：
def test_func(request):
if request.method == 'POST':
print(request.POST)
print(request.FILES)
return render(request, 'test.html')
后端代码：
<input type="file" id="d2">
<button id="d3">携带文件数据</button>
<script>
$('#d3').click(function () {
// 1.先产生一个form-data对象，js内置对象
let myFormDataObj = new FormData(); // 此对象专门用来发送携带文件类型数据
// 2. 向该对象中添加普通数据(urlencode格式数据)
myFormDataObj.append('name', 'Jerry');
myFormDataObj.append('age', 5);
// 3. 向该对象中添加文件数据
myFormDataObj.append('file', $('#d2')[0].files[0]) // 获取标签里携带的文件数据
// 4. 发送ajax请求
$.ajax({
url:'',
type:'post',
data:myFormDataObj,
// ajax发送文件固定的两个配置
contentType:false, // 因为会用的是myFormDataObj发送的数据，不可以有任何编码，当没有编码时，django会自动识别这个对象
processData:false, // 前端不作任何处理，比如打包之类的
success:function (args) {
alert(args)
}
})
})
</script>
最终后台日志：
<QueryDict: {'name': ['Jerry'], 'age': ['5']}> # 在request.POST里
<MultiValueDict: {'file': [<InMemoryUploadedFile: 我的文件.txt (text/plain)>]}> # 在request.FILES里
其它说明
1. request.is_ajax() # 判断当前请求是否是ajax请求，返回值：True或False
2. 后端返回的三板斧都会被args接收，不再影响整个浏览器页面
3. 选择使用ajax做前后端交互时，后端一般返回的都是字典数据
比如可以在字典中字义一个响应状态码，供前端判断使用
注意：传送到前端后，前端会变为strings格式数据，无法以点的方式获取字典中的数据，解决方法
方法一：需要在前端使用JSON.parse(args)反序列化json格式数据，代码如下：
前端：
def test_func(request):
if request.method == 'POST':
user_dict = {'code': 1000, 'username': 'MyJerry'}
import json
user_data = json.dumps(user_dict)
return HttpResponse(user_data)
return render(request, 'test.html')
后端：
<script>
$('#d1').click(function () {
$.ajax({
url:'',
type:'post',
data:{'name': 'Jerry'},
success:function (args) {
let userObj = JSON.parse(args) // 转换数据
console.log(userObj.name) // 转换后就可以用点的形式获取数据
}
})
})
</script>
方法二： 在后端使用JsonResponse进行反序列化json格式数据
后端：
def test_func(request):
if request.method == 'POST':
user_dict = {'code': 1000, 'username': 'MyJerry'}
from django.http import JsonResponse
return JsonResponse(user_dict)
return render(request, 'test.html')
前端：
<button id="d1">发送ajax请求</button>
<script>
$('#d1').click(function () {
$.ajax({
url:'',
type:'post',
data:{'name': 'Jerry'},
success:function (args) {
console.log(args.username)
}
})
})
</script>
方法三： 使用前端ajax参数：dataType:'json'自动反序列化json格式数据，不需要let userObj = JSON.parse(args)进行转换。后端使用JsonResponse或HttpResponse都可以
后端代码：
def test_func(request):
if request.method == 'POST':
user_dict = {'code': 1000, 'username': 'MyJerry'}
import json
user_obj = json.dumps(user_dict)
return HttpResponse(user_obj)
return render(request, 'test.html')
前端代码：
<button id="d1">发送ajax请求</button>
<script>
$('#d1').click(function () {
$.ajax({
url:'',
type:'post',
data:{'name': 'Jerry'},
dataType:'json',
success:function (args) {
console.log(args.username)
}
})
})
</script>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· AI与.NET技术实操系列（六）：基于图像分类模型对图像进行分类