AJAX
AJAX : (Asynchronous JavaScript And XML ) 翻译成中文: 异步 JavaScript and XML。一种创建交互式网页应用的网页开发技术方案。
AJAX的作用:
- 注册时,输入用户名自动检测用户是否已经存在。
- 登陆时,提示用户名密码错误
- 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功后,在页面DOM中将数据行也删除。
使用JavaScript 语言与服务器进行交互,传递的数据是XML格式,现在也可以传输JSON。
**AJAX 和普通的传输数据方式不同点:**可以实现局部刷新功能。
Ajax 常见的应用场景:
(1)、搜索引擎根据用户输入的关键字、自动提示搜索内容。
(2)、进行注册时,信息的校验。
AJAX优缺点:
优点: 1.异步向服务器发送请求,无需刷新整个界面。
缺点: 服务器压力比较大。
jquery提供的ajax功能:
<!DOCTYPE html>
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax请求</title>
</head>
<body>
<script src="{% static 'jquery-3.3.1.js' %}"></script>
<form action="">
<p>
用户名:<input type="text" name="username" id="username">
<span id="error" style="color:red"></span>
</p>
<p>
密码:<input type="password" name="pwd">
</p>
<p>
<input type="submit" value="提交">
</p>
</form>
<script>
$(
function () {
//失去焦点事件
$("#username").blur(function () {
var username=$("#username").val();
alert(username);
//发送ajax
$.ajax({
url:"/app01/laowang4_ajax/",//提交路径
type:'GET',//提交方式 GET或POST
data:{'name':username},//提交的数据
success:function (msg) {//服务器正常响应,就会自动调用函数,并且将后台的值传递给data形参
var value=msg.result;
if (value=='true'){
alert("此用户已被注册!!!");
$("#error").text("此用户已被注册!!")
}else{
alert("可以注册");
}
console.log(msg)
}
})
})
}
)
</script>
</body>
</html>
views.py 文件:
def laowang4_ajax(request):
#获取前端提交过来的数据,进行判断
name=request.GET.get('name')
if name=='zs':
result='true'#返回true表示此用户已经注册过
else:
result='false'#此用户没有注册过
return JsonResponse({'result':'false'})