【一】Ajax简介
【1】介绍#
- Ajax（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。
- 就是使用JavaScript语言与服务器进行异步交互
- Ajax不是新的编程语言，而是一种使用现有标准的新方法。
- Ajax最大的优点是重新加载整个页面的情况下与后端服务器交换数据，并且更新局部网页内容，也就是在不知不觉中完成请求与响应的过程
【2】精髓#
【3】总结发送请求的方式#
GET请求
GET请求
GET/POST请求
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: '',
type: 'post',
data: {'d1': $('#d1').val(), 'd2': $('#d2').val()},
success: function (sum) {
$('#d3').val(sum)
}
})
})
</script>
</body>
</html>
【2】后端视图函数#
def ajax(request):
if request.method == 'POST':
d1 = request.POST.get('d1')
d2 = request.POST.get('d2')
d3 = int(d1) + int(d2)
return HttpResponse(d3)
return render(request, 'ajax.html')
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单，K8s 太复杂？w7panel 让容器管理更轻松！