Django登录小案列（Ajax优化版）

一、Ajax基本概念

异步JavaScript和XML，在不全部加载某一个页面的情况下，对页面进行局部刷新。注意：所有的Ajax请求都是在后台。

二、Ajax请求过程

发起ajax请求：jqeury发起
执行相应的视图函数，返回json数据
执行相应的回调函数，通过判断json内容进行相应处理

格式：


    $.ajax({
        'url': '请求地址',
        'type': '请求方式', 
         dataType': 'json'
    }).success(function (data) {
        // 进行处理的部分

        }

三、配置

通常建立一个static的文件夹，把图片，css文件，js文件放在同一个目录下
setting配置：

四、代码

from django.shortcuts import render
from django.http import HttpResponse, JsonResponse

# Create your views here.


def index(request):
    return HttpResponse('登录成功')


def login_ajax(request):

    return render(request, 'mylogin/login_ajax.html')


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

    # 2.校验并返回应答
    if username == 'wen' and password == '123':
        return JsonResponse({'res': 1})

    else:
        return JsonResponse({'res': 0})

<!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 () {

            $('#btnAjax').click(function () {
                // 1.获取用户名和密码 格式：$('#xxxx').val()
                username = $('#username').val()
                password = $('#password').val()

                // 2.发起ajax请求
                $.ajax({
                    'url': '/login_ajax_check',
                    'type': 'post',
                    'data': {'username' : username, 'password': password }, // ''下的username对应着视图函数中的username
                    'dataType': 'json'
                }).success(function (data) {
                    // 进行处理

                    if (data.res==0){
                        $('#errmsg').show().html('用户名或密码错误')
                    }
                    else{
                        // 跳转到首页
                        location.href = '/index'
                    }

                })

            })
        })
    </script>
    <style>
        #errmsg{
            display: none;
            color:red;
        }
    </style>

</head>

<body>
<h1>Ajax登录例子</h1>
<div>
    <p>
        <label for="">用户名：</label>
        <input type="text" id="username">
    </p>

    <p>
        <label for="">密&nbsp;&nbsp;&nbsp;码：</label>
        <input type="password" id="password">
    </p>

    <p>
        <input type="button" id="btnAjax" value="登录">
    </p>
    <div id="errmsg"></div>
</div>
</body>
</html>

五、遇到的问题

在编写JavaScript代码的时候，pycharm无法自动补全，弄了很久，最后才知道pycharm社区版不支持自动补全，需要专业版才可以。
发送Ajax请求时data和dataType顺序不能错。

Django登录小案列（Ajax优化版）

猜你喜欢