AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
- 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。
AJAX除了异步的特点外，还有一个就是：浏览器页面局部刷新；（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
1. 描述： 制作简单的加法运算体现Ajax简单小案例，实现后台自动运算，页面不刷新
【Ajax基本格式】
$.ajax({
url: "", // 提交的地址url
type: "", // 请求方式
success: function(){ // 回调函数
pass
}
})
2. Django定义url，定义页面访问
from django.contrib import admin
from django.urls import path,re_path
from app1 import views
urlpatterns = [
path('book/index1/', views.index1),
]
3. 定义views跳转
def index1(request):
return render(request, "index1.html")
【index.html】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3"> <button id="btn1">计算</button> <script src="/static/js/jquery.js"></script> <script> </body> </html>
【页面访问】
4. 配置Ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1"> + <input type="text" id="i2"> = <input type="text" id="i3"> <button id="btn1">计算</button>
<script src="/static/js/jquery.js"></script>
<script>
$("#btn1").click(function () {
// 1. 获取页面的数据
var num1 = $("#i1").val();
var num2 = $("#i2").val();
{#console.log(num1, num2);#}
// 2. 发送ajax请求
$.ajax({
url: "/ajax_sum/",
type: "post",
data: {
num1: num1,
num2: num2,
},
success: function (data) { // 3. 获取响应结果
console.log(data);
$("#i3").val(data.msg); // 4. 实现页面的局部刷新
}
})
});
</script>
</body>
</html>
5. 配置Ajax请求路径
from django.contrib import admin
from django.urls import path,re_path
from app1 import views
urlpatterns = [
path('book/index1/', views.index1),
path('ajax_sum/', views.ajax_sum)
]
6. 配置Ajax ，views请求
def ajax_sum(request):
num1 = request.POST.get("num1")
num2 = request.POST.get("num2")
ret = {'status': 1, "msg": None}
# print(type(num1), num2)
total = int(num1) + int(num2)
ret['msg'] = total
# return HttpResponse(total)
return JsonResponse(ret)
7. 测试Ajax，随意输入数字相加，页面不刷新，后台自动运算返回页面
【请求流程】
