Python-Django：Ajax请求（登录案例）

最新推荐文章于 2024-01-31 17:00:07 发布

此时一位小白路过

最新推荐文章于 2024-01-31 17:00:07 发布

阅读量1k

点赞数 1

分类专栏： python—Django3.1学习文章标签： django python ajax

本文链接：https://blog.csdn.net/weixin_45365220/article/details/109626867

版权

python—Django3.1学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Ajax请求

Ajax：异步的JavaScript

在不重新加载页面的情况下，对页面进行局部的刷新

$.ajax({
	'url':请求地址,
	'type':请求方式,
	'dataType':预期返回的数据格式（一般是json格式）,
	'data':参数
	}).success(function(回调的数据){
	//Ajax请求执行完成之后执行的回调函数
	})

当浏览器发起Ajax请求给后端，后端在views文件中进行处理，并返回 return JsonResponse(回调的数据)，将json数据返回给浏览器，浏览器执行success()回调函数。

注：当Ajax请求出现错误时，只能通过浏览器查看错误信息

关于Ajax同步与异步

异步：不等待回调函数的执行完成，直接运行后续代码
同步：等待回调函数执行完成后才继续运行后面的代码

$.ajax({
	'url':请求地址,
	'type':请求方式,
	'dataType':预期返回的数据格式（一般是json格式）,
	'data':参数,
	'async':false
	}).success(function(回调的数据){
	//Ajax请求执行完成之后执行的回调函数
	})

Ajax登录案例代码

用表单(< form >)完成登录案例

login_page.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
</head>
<body>
<form method="post" action="/login_check">
    用户名:<input type="text" name="nameuser"><br/>
    密码:<input type="password" name="password"><br/>
    <input type="submit" value="登录">
</form>
</body>
</html>

views.py

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


def login_check(request):
    nameuser = request.POST.get('nameuser')
    password = request.POST.get('password')
    print(request.path)
    try:
        user = UserInfo.objects.get(username=nameuser)
    except:
        print('aaaaaaaa')
        return redirect('/login')
    else:
        if user.password == int(password):
            return redirect('/books')
        else:
            print(user.password)

            return redirect('/login')

用Ajax完成登录案例

login_ajax.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>ajax登陆页面</title>
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $('#btnLogin').click(function () {
                // 获取用户名和密码
                nameuser = $('#nameuser').val()
                passqord = $('#password').val()
                // 发起post ajax 请求
                $.ajax({
                    'url':'login_ajax_check',
                    'type':'post',
                    'data':{'username':nameuser, 'password':passqord},
                    'datatype':'json'
                }).success(function (data) {
                    // 登录成功{'res':1}
                    // 登录失败{'res':0}
                    if (data.res === 0){
                        $('#errmsg').show().html('用户名输入错误')
                    }
                    else if(data.res === 2){
                        $('#errmsg').show().html('密码输入错误')
                    }
                    else {
                        // 跳转到图书界面
                        location.href = '/books'
                    }
                })
            })
        })
    </script>
    <style>
        #errmsg{
            display: none;
            color: red;
        }
    </style>
</head>
<body>
<div>
    用户名:<input type="text" id="nameuser"><br/>
    密码:<input type="password" id="password"><br/>
    <input type="button" id="btnLogin" value="登录">
    <div id="errmsg"></div>
</div>
</body>
</html>

views.py

def login_ajax(request):
    return render(request, 'booktest/login_ajax.html')


def login_ajax_check(request):
    # 获取用户名和密码
    username = request.POST.get('username')
    password = request.POST.get('password')

    # 进行效验，返回json数据
    print(username)
    print(password)
    try:
        u1 = UserInfo.objects.get(username=username)
    except:
        print('aaaaa')
        return JsonResponse({'res': 0})

    else:
        if u1.password == int(password):
            print('bbbbb')
            return JsonResponse({'res': 1})
        else:
            print('cccc')
            return JsonResponse({'res': 2})