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 }}&#45;&#45;<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登录校验

测试
- 错例
- 正例

django Ajax请求

django Ajax请求

目的

基本概念

示例

猜你喜欢