一、Ajax诞生
一、常规的客户端给服务端发送请求,服务端响应以后,请求转发或重定向都会刷新全部界面,而我们有需求局部刷新界面,所以Ajax就是解决这个问题。比如在登录的时候,会弹出登录框,我们点击登陆后,不能刷新全部界面,否则不能提示账号或密码错误,而需要账号和密码等分别独立的偷偷的向某个url发请求,服务器也偷偷的响应,实现局部刷新。
- 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求;
- 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求。
二、jQuery的实现方式实力
页面中jQuery的写法:
$('#account').blur(function () {
var account = $('#account').val();
if (account == null || account == ''){
$('#s1').html('账号不能为空');
return
}
$.ajax({
url: '/account/', #要请求的URL
type: 'POST', #请求类型
data: {'account':account}, #请求数据,字典类型,会自动添加到请求头或请求体
headers: {"X-CSRFToken":$.cookie("csrftoken")}, #csrf
success:function (data) { #响应成功后,客户端执行的函数。也称回调函数,data为服务端响应的数据
console.log(data);
$('#s1').html(data)
}
})
});
views中函数的处理:
def account(request):
listaccount = Users.objects.all().values('account')
nickname = request.POST.get('nickname')
data = ''
if nickname in listaccount:
data = '账号已使用,请重新输入'
else:
data = '账号可用'
return HttpResponse(data)
三、拓展
如果是请求的是图片:
$.ajax({
async:true, #开启异步交互,默认为true
url:'/upimg/',
type:'POST',
data:formdata,
headers:{"X-CSRFToken":$.cookie("csrftoken")},
contentType:false,
processData:false,
success:function (data) {
console.log(data);
$('#imghead').attr('src',data);
d = data.split('\\');
$('#filename').attr('value',d[d.length-1])
return true
}
});