【10.0】Ajax之引入
【一】Ajax简介
【1】精髓
精髓:异步提交/局部刷新
- 动态获取用户名,实时跟后端确认并将结果展示给前端
【2】发送请求的方式
- 向后端发送请求的方式
- 浏览器地址直接url回车
- GET请求
- a标签的 href 属性
- GET请求
- form表单
- GET请求/POST请求
- Ajax
- GET请求/POST请求
- 浏览器地址直接url回车
【3】简介
Ajax不是新的编程语言,而是一种使用现有标准的新方法(类比装饰器)
Ajax最大的优点就是不重新加载页面的情况下,可以与服务器交换数据并更新部分网页内容
这种特点给用户的感觉就是在不知不觉中完成了请求和响应过程
-
Ajax(Asynchronous JavaScript and XML)是一种用于创建动态网页的编程技术。
- 它通过在网页上进行异步数据传输,实现了在不重新加载整个页面的情况下更新部分页面内容的能力。
-
Ajax的核心技术包括使用JavaScript和XMLHttpRequest对象与服务器进行数据交互,以及利用DOM(Document Object Model)来动态地更新页面。
-
通过使用Ajax,网页可以在后台与服务器进行数据交换,并在不刷新整个页面的情况下,根据服务器返回的数据实时更新页面的某些部分。
-
这种技术带来了很多好处,比如提高了用户体验、减少了网络流量和服务器负载,并使得开发人员能够创建更加交互和动态的网页应用程序。
-
虽然Ajax最初是指Asynchronous JavaScript and XML,但如今已经不仅限于使用XML作为数据传输的格式,而是可以使用各种格式,如JSON(JavaScript Object Notation)。
-
总结起来,Ajax是一种强大的前端开发技术,通过异步数据传输和动态页面更新,提供了更好的用户体验和交互性,广泛应用于现代Web应用程序的开发中。
【二】Ajax引入
【1】案例
- 页面上有三个 input 框
- 在前面两个框输入数字,点击按钮,朝后端发送Ajax请求
- 在后端计算出结果,再返回给前端动态展示的第三个input框中
- 要求
- 整个过程页面不能刷新,也不许在前端计算
(1.0)普通版
- 后端
from django.shortcuts import render, HttpResponse
def ab_ajax(request):
if request.method == 'POST':
# print(request.POST) # <QueryDict: {'i1': ['3'], 'i2': ['4']}>
num1 = request.POST.get('i1') # 3 - 文本类型
num2 = request.POST.get('i2') # 4 - 文本类型
# 强转类型并做运算
sum = int(num1) + int(num2)
# 返回数据
return HttpResponse(sum)
return render(request, 'ab_ajax.html')
- html 页面
<script>
// 先给按钮绑定点击事件
$('#btn').click(function () {
// 向后端发送Ajax请求
$.ajax({
// (1)指定发送后端的请求接口
url: '',// 不写就是朝当前地址发送请求
// (2)请求方式
type: "post", // 不指定默认就是 get 全小写
// (3)提交数据
data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},
// (4)异步提交有一个回调函数 (异步回调机制)
// 当后端返回结果的时候会自动触发,args 会自动接受后端传过来的结果
success: function (args) {
{#alert(args)#}
// 通过DOM操作动态数据渲染到第三个 input 框中
console.log(args) // string
$('#d3').val(args)
},
})
})
</script>
(2.0)升级版
- 后端
from django.http import JsonResponse
from django.shortcuts import render, HttpResponse
import json
# Create your views here.
def ab_ajax(request):
if request.method == 'POST':
# print(request.POST) # <QueryDict: {'i1': ['3'], 'i2': ['4']}>
num1 = request.POST.get('i1') # 3 - 文本类型
num2 = request.POST.get('i2') # 4 - 文本类型
# 强转类型并做运算
sum = int(num1) + int(num2)
# 返回数据
data = {
"message": "success",
"sum": sum,
}
# 需要将数据序列化进行传输
return HttpResponse(json.dumps(data))
return render(request, 'ab_ajax.html')
- html 前端
<script>
// 先给按钮绑定点击事件
$('#btn').click(function () {
// 向后端发送Ajax请求
$.ajax({
// (1)指定发送后端的请求接口
url: '',// 不写就是朝当前地址发送请求
// (2)请求方式
type: "post", // 不指定默认就是 get 全小写
// (3)提交数据
data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},
// 参数 - 会自动反序列化 传过来的数据
{#dataType:true,#}
// (4)异步提交有一个回调函数 (异步回调机制)
// 当后端返回结果的时候会自动触发,args 会自动接受后端传过来的结果
success: function (args) {
{#alert(args)#}
// 通过DOM操作动态数据渲染到第三个 input 框中
$('#d3').val(args)
},
})
})
</script>
(3.0)升级
- 后端
from django.http import JsonResponse
from django.shortcuts import render, HttpResponse
import json
# Create your views here.
def ab_ajax(request):
if request.method == 'POST':
# print(request.POST) # <QueryDict: {'i1': ['3'], 'i2': ['4']}>
num1 = request.POST.get('i1') # 3 - 文本类型
num2 = request.POST.get('i2') # 4 - 文本类型
# 强转类型并做运算
sum = int(num1) + int(num2)
# 返回数据
data = {
"message": "success",
"sum": sum,
}
# 需要将数据序列化进行传输
return JsonResponse(data)
return render(request, 'ab_ajax.html')
- html 前端
<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)指定发送后端的请求接口
url: '',// 不写就是朝当前地址发送请求
// (2)请求方式
type: "post", // 不指定默认就是 get 全小写
// (3)提交数据
data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},
// 参数 - 会自动反序列化 传过来的数据
{#dataType:true,#}
// (4)异步提交有一个回调函数 (异步回调机制)
// 当后端返回结果的时候会自动触发,args 会自动接受后端传过来的结果
success: function (args) {
{#alert(args)#}
// 通过DOM操作动态数据渲染到第三个 input 框中
console.log(args) // object
// 经过 JsonResponse 处理过的数据传过来的是 object 对象
// object 对象 可以直接 . 属性
$('#d3').val(args.sum)
},
})
})
</script>
</body>
【2】小结
(1)基本语法
<script>
// 先给按钮绑定点击事件
$('#btn').click(function () {
// 向后端发送Ajax请求
$.ajax({
// (1)指定发送后端的请求接口
url: '',// 不写就是朝当前地址发送请求
// (2)请求方式
type: "post", // 不指定默认就是 get 全小写
// (3)提交数据
data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},
// (4)异步提交有一个回调函数 (异步回调机制)
// 当后端返回结果的时候会自动触发,args 会自动接受后端传过来的结果
success: function (args) {
{#alert(args)#}
// 通过DOM操作动态数据渲染到第三个 input 框中
console.log(args) // string
$('#d3').val(args)
},
})
})
</script>
(2)注意
- 针对后端如果是用
HttpResponse
返回的数据,回调函数不会自动帮我们反序列化 - 针对后端如果是用
JsonResponse
返回的数据,回调函数会自动帮我们反序列化
(3)HttpResponse
解决方式
- 后端先进行序列化,再返回数据给前端
- 前端加参数进行反序列化
本文来自博客园,作者:Chimengmeng,转载请注明原文链接:https://www.cnblogs.com/dream-ze/p/17559615.html