Ajax简介
AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）
- AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
- AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
Ajax我们只学习jQuery封装之后的版本(不学原生的 原生的复杂并且在实际项目中也一般不用)
ajax示例
{# index.html #}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<input type="text" id="d1"> +
<input type="text" id="d2"> =
<input type="text" id="d3">
<p>
<button id="btn">点我</button>
</p>
<script>
// 先给按钮绑定一个点击事件
$(‘#btn‘).click(function () {
// 朝后端发送ajax请求
$.ajax({
// 1.指定朝哪个后端发送ajax请求
url:‘‘, // 不写就是朝当前地址提交
// 2.请求方式
type:‘post‘, // 不指定默认就是get 都是小写
// 3.预期服务器返回的数据类型
datatype: ‘json‘,
// 4.数据
data:{‘i1‘:$(‘#d1‘).val(),‘i2‘:$(‘#d2‘).val()},
// 5.回调函数:当后端给你返回结果的时候会自动触发 args接受后端的返回结果
success:function (data) {
// 通过DOM操作动态渲染到第三个input里面#}
$(‘#d3‘).val(data)
// JSON.parse(data)
// console.log(typeof data)
// 针对后端如果是用HttpResponse返回的数据 回调函数不会自动帮你反序列化你要自己用JSON.parse反序列化或者设置datatype
// 如果后端直接用的是JsonResponse返回的数据 回调函数会自动帮你反序列化
}
})
})
</script>
</body>
</html>
# views.py
import json
from django.http import JsonResponse
def ab_ajax(request):
if request.method == "POST":
# print(request.POST) # <QueryDict: {‘username‘: [‘jason‘], ‘password‘: [‘123‘]}>
i1 = request.POST.get(‘i1‘)
i2 = request.POST.get(‘i2‘)
# 先转成整型再加
i3 = int(i1) + int(i2)
return HttpResponse(i3)
# d = {‘code‘:100,‘msg‘:666}
# 向前端传字典要序列化
# return HttpResponse(json.dumps(d))
# return JsonResponse(d)
return render(request,‘index.html‘)