django中Ajax的应用

一、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
    }
})；