Ajax
Ajax 即“Asynchronous java script And XML”(异步 java script 和 XML),是指?种创建交互式??应?的??开发技术。
Ajax 是?种?于创建快速动态??的技术。
Ajax 是?种在?需重新加载整个??的情况下,能够更新部分??的技术。
通过在后台与服务器进?少量数据交换,Ajax 可以使??实现异步更新。这意味着可以在不重新加载整个??的情况下,对??的某部分进?更新。
传统的??(不使? Ajax)如果需要更新内容,必须重载整个????。
Ajax的优点:
异步
:发送?个请求,不需要等待响应返回,随时可以再发送下?个请求,即不需要等待。
局部刷新
:通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。【传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。】
应用场景:
这是一个cnblog账户注册界面,当我们在填写昵称的时候输入regina,这个过程本身并没有进行表单提交或者向服务器发送请求,但是当光标离开这个input框之后,就会自动检测了这里面的内容,并且返回提示这个昵称被占用了,而在图二到图三的过程当中,前端显示为下图,有一个刷新的过程,这个就是由于Ajax的局部刷新作用
这个过程中到底浏览器做了些什么工作
我们筛选出XHR(XmlHttpResponse)类型的报文,看到其实浏览器是进行了一个checkDisplayName
的操作发送给了服务器,然后服务器的返回如下
json回顾
映射关系
Python | Json |
---|---|
dict | object |
list, tuple | array |
str | string |
int, float | number |
True | True |
False | False |
None | Null |
dic = {
'user':"regina",
'age':22,
'is_married':True
}
print(json.dumps(dic),type(json.dumps(dic)))
{"user": "regina", "age": 22, "is_married": true} <class 'str'>
可以看到字典中的单引号全部变成了双引号,True映射成了true
dic = [{'user':"regina"},{'age':20}]
print(repr(json.dumps(dic)))
dic = ({'user':"regina"},{'age':20})
print(repr(json.dumps(dic)))
'[{"user": "regina"}, {"age": 20}]'
'[{"user": "regina"}, {"age": 20}]'
列表和元组全变为了数组形式。
Ajax请求
首先确定一个概念就是Ajax请求不是表单提交,是JS代码提交的,说明是要构建一个js代码函数进行提交请求,所以这里的submit是没有用的,现在构建一段js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
<title>Title</title>
</head>
<body>
<h3>注册界面</h3>
用户名<input type="text" class="user"><br>
密码 <input type="password"><br>
<input type="submit">
<script>
$(".user").blur(function () {
alert(123);
})
</script>
</body>
</html>
首先做一个测试,当光标移除用户名时,会弹窗。
现在改为ajax请求的方式
<script>
$(".user").blur(function () {
$.ajax({
url:"http://127.0.0.1:8001/user/check/",
//请求方式默认get
})
})
</script>
然后我们设置好路由,在用户名中输入内容并离开框,看是否有新的请求发出。
我们的目的是要将input标签里的用户名传给后端
$(".user").blur(function () {
$.ajax({
url:"http://127.0.0.1:8001/user/check/",
//请求方式默认get
data:{
"name" : $(".user").val()
},
})
})
经过测试,我们的数据已经传回给了后端,并且也可以打印出来,现在要做的就是进行一个验证再反馈到前端
def check(request):
ret = User.objects.filter(username=request.GET.get("name"))
if ret:
return HttpResponse("用户已存在")
else:
return HttpResponse("")
这样的话请求我们就做好了
$.ajax({
url:"http://127.0.0.1:8001/user/check/",
//请求方式默认get
data:{
"name" : $(".user").val()
},
//当相响应正常时触发当函数
success:function (res) {
console.log(res)
}
})
success参数得到了后端响应回来的数据,并打印了出来,现在可以通过dom对象的操作,将返回内容添加到登陆界面进行提示。在用户名标签的后面添加一个span标签,然后选中标签进行添加内容
$(".err").htm