18 登陆案例改进，使用ajax请求

原来的案例用表单提交数据，现在改为ajax请求，注意两点：

1、首先分析出请求地址时需要携带的参数  【比如：用户名、密码】

2、视图函数处理完成后，所返回的json的格式 【比如 {'res':1}表示成功，{'res':0}表示失败】

 

urls.py

from django.urls import path, re_path
from bookapp import views


urlpatterns = [
    path('index', views.index),
    path('create', views.create),
    re_path(r'^delete/(\w+)', views.delete),
    path('areas',views.areas),
    path('login',views.login),

    re_path('^login_ajax_check$',views.login_ajax_check),

]

 

views.py

from django.shortcuts import render, redirect
from bookapp.models import BookInfo, HeroInfo,AreaInfo
from datetime import date
from django.http import HttpResponseRedirect,HttpResponse,JsonResponse

# Create your views here.
def index(request):
    books = BookInfo.objects.all()
    return render(request,'index.html',{'books':books})



def login(request):
    return render(request,'login.html')


def login_ajax_check(request):
    '''ajax登陆校验'''
    #获取用户名和密码
    username = request.POST.get('username')
    password = request.POST.get('password')
    #进行校验，返回json数据
    if username == 'test' and password == '123':
        return JsonResponse({'res':1})
        # 这个地方不能直接跳转到index，比如：
        # return redirect('/index')
        # 因为ajax请求是在后台进行，浏览器确实会访问index，但是是在后台访问的，页面上看不到，所以不要返回页面或重定向
    else:
        return JsonResponse({'res':0})

 

login.html

<!DOCTYPE html>
<html>
<head>
    <title>login</title>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            $('#btn_login').click(function(){
                //获取用户名和密码
                username = $('#username').val()
                password = $('#password').val()
                //发起post方式的ajax请求/login_ajax_check,携带用户名和密码
                $.ajax({
                    url:'/login_ajax_check',
                    type:'post',
                    data:{'username':username,'password':password},
                    dataType:'json',
                }).done(function(data){
                    //登陆成功返回{'res':1}
                    //登陆失败返回{'res':0}
                    if(data.res==0){
                        $('#error').show().html('用户名或密码错误！')
                    }
                    else{
                        //跳转到首页
                        location.href = '/index'
                    }
                })
            })
        })
    </script>
    <style type="text/css">
        #error{
            display: none;
            color: red;
        }
    </style>
</head>
<body>
    <!-- method有两个选项：post和get，post：信息会在请求头部中，get：信息会直接在url中。post更安全一些 -->
  <!--   <form method="post" action="/check">
        user:<input type="text" name="username">
        pass:<input type="password" name="password">
        <input type="submit" name="提交">
    </form>
    不用表单提交，下面改用ajax
    -->
    user:<input type="text" id="username">
    pass:<input type="password" id="password">
    <input type="button" id='btn_login' value="提交">
    <div id='error'></div>

</body>
</html>

 

posted @ 2019-08-12 23:14  greenfan  阅读(231)  评论(0)    收藏  举报