【一】Ajax简介
【1】介绍
- Ajax（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。
- 就是使用JavaScript语言与服务器进行异步交互
- Ajax不是新的编程语言，而是一种使用现有标准的新方法。
- Ajax最大的优点是重新加载整个页面的情况下与后端服务器交换数据，并且更新局部网页内容，也就是在不知不觉中完成请求与响应的过程
【2】精髓
【3】总结发送请求的方式
# 1.浏览器直接输入url回车
GET请求
# 2.点击a标签
GET请求
# 3.form表单
GET/POST请求
# 4.Ajax
GET/POST请求
【二】案例
- 现有三个输入框，要求在前两个框内输入数字，点击按钮后第三个框得到结果
- 整个页面不能刷新，也不能把计算的逻辑放在前端
【1】前端页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<script src="{% static 'jQuery.min.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
</head>
<body>
<p>
<input type="text" id="d1">+
<input type="text" id="d2">=
<input type="text" id="d3">
</p>
<p><input type="submit" id="btn"></p>
<script>
$('#btn').on('click', function () {
$.ajax({
// 先给目标url 不填默认就是向当前url发送请求
url: '',
// 定义请求方法 ,默认不填是get方法
type: 'post',
// 定义提交到后端的数据
data: {'d1': $('#d1').val(), 'd2': $('#d2').val()},
// 因为是异步提交，所以需要定义回调函数,函数的形参用来接收后端传来的数据
success: function (sum) {
$('#d3').val(sum)
}
})
})
</script>
</body>
</html>
【2】后端视图函数
def ajax(request):
# 因为前端定义了是post请求 所以用POST方法来接收数据
if request.method == 'POST':
d1 = request.POST.get('d1')
d2 = request.POST.get('d2')
# 因为传来的数据是一个字符串，所以需要转一下数据类型
d3 = int(d1) + int(d2)
# 通过HttpResponse将计算的结果传回到前端
return HttpResponse(d3)
return render(request, 'ajax.html')
