版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_29726359/article/details/86592474
django Ajax请求
目的
-
为了避免多次进行浏览刷新,对服务器造成一定负荷,考虑对页面进行局部刷新。
基本概念
-
异步的javascript。在不全部加载某一个页面部的情况下,对页面进行局的刷新,ajax请求都在后台。
-
图片,css文件,js文件都是静态文件。
示例
-
前台代码
-
test.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax登录页面</title> <script src="/static/js/jquery-1.12.4.min.js"></script> <script> $(function () { $('#btnLogin').click(function () { // 1.获取用户名和密码 username = $('#username').val() password = $('#password').val() // 2.发起post ajax请求,/login_ajax_check, 携带用户名和密码 $.ajax({ 'url':'/login_ajax_check', 'type': 'post', 'data': {'username':username, 'password':password}, 'dataType': 'json' }).success(function (data) { // 登录成功 {'res':1} // 登录失败 {'res':0} if (data.res == 0){ $('#errmsg').show().html('用户名或密码错误') } else{ // 跳转到首页 location.href = '/index' //当前打开页面文件夹 } }) }) }) </script> <style> #errmsg{ display: none; color: red; } </style> </head> <body> <div> 用户名:<input type="text" id="username"><br/> 密码:<input type="password" id="password"><br/> <input type="button" id="btnLogin" value="登录"> <div id="errmsg"></div> </div> </body> </html>
-
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--<a href="/create">新增</a>--> <!--<ul>--> <!--{% for b in book %}--> <!--<li>{{ b.btitle }}--<a href="/delete{{ b.id }}">删除</a></li>--> <!--{% endfor %}--> <!--</ul>--> useername:{{username}} </body> </html>
-
-
视图函数
# /login_ajax_check def login_ajax_check(request): '''ajax登录校验''' # 1.获取用户名和密码 username = request.POST.get('username') password = request.POST.get('password') # 2.进行校验,返回json数据 if username == 'smart' and password == '123': # 用户名密码正确 return JsonResponse({'res':1}) # return redirect('/index') ajax请求在后台,不要返回页面或者重定向 else: # 用户名或密码错误 return JsonResponse({'res':0}) def hello(request): # 1.查询所有图书信息 #books=BookInfo.objects.all() if request.session.has_key('islogin'): return HttpResponse("此页面已经登录") else: username= request.COOKIES['username'] return render(request,"bookstore/index.html",{"username":username});
-
url配置
url(r'^index$',views.hello), url(r'^login_ajax_check$', views.login_ajax_check), # ajax登录校验
-
测试
-
错例
-
正例
-