Django（十二）视图

技巧：调试中也查看错误调试

2.2 Ajax异步和同步请求控制（上一步的第4步）

添加js部分到alert(1),2,3查看运行顺序

在 /app1/.html 中 p>

    
    
    
    
        $(function () {
            // 绑定btnAjax的click事件
            $('#btnAjax').click(function () {
                alert(1)//【1】
                $.ajax({
                    'url': '/ajax_handle',
                    'dataType': 'json',
                    // 'async': false, // 【4】同步的ajax请求
                }).success(function (data) {
                    // 进行处理
                    alert(2)//【2】
                    if (data.res == 1){
                        $('#message').show().html('提示信息')
                    }
                })
                alert(3)//【3】
            })

        })
    
    
        #message {
            display: none;
            color: red;
        }
    

效果：操作发现运行顺序是1,3,2而不是预期的1,2,3 这是item [4]的异步注释取消，顺序会变成1,2,3，和然后改回同步

同步设置：’async’: false，

        $(function () {
            // 绑定btnAjax的click事件
            $('#btnAjax').click(function () {
                alert(1)//【1】
                $.ajax({
                    'url': '/ajax_handle',
                    'dataType': 'json',
                    'async': false, // 【4】同步的ajax请求
                }).success(function (data) {

                    // 进行处理
                    alert(2)//【2】
                    if (data.res == 1){
                        $('#message').show().html('提示信息')
                    }
                })
                alert(3)//【3】
            })
        })
    

2.3个ajax登录案例

【目标】：实现用户信息输入错误，不刷新页面清除数据，直接提示错误，保存需要重新输入信息

1) 首先分析一下请求地址时需要携带的参数。视图函数处理后，返回json格式。显示登录页面：

a) 设计url，在显示登录页面时浏览 : 8000/。

b) 设计url对应的视图函数。

c) 编写一个模板文件.html：在其中编写代码来发起一个ajax请求。 2) 然后，登录验证功能

a) 设计url，在登录页面点击登录按钮发起请求：8000/hours进行登录验证。

b) 设计url对应的视图函数：

接收post提交的数据。执行登录验证并返回 json 内容。格式如下：

{'res':'1'} #表示登录成功
{'res':'0'} #表示登录失败

第 1 步，/app1/login.html

    

    
    
    


    // 【5】写ajax处理函数
    $(function () {
        $('#btnLogin').click(function () {
            //1.获取用户名、密码
            username=$('#username').val()
            password=$('#password').val()
            //2.发起ajax--post(username,password)请求验证，地址：/login_check
            $.ajax({
                'url':'/login_check',//验证地址
                'type':'post',//请求类型
                'data':{'username':username,'password':password},//发送数据
                'dataType':'json',//希望返回数据类型
            }).success(function(data){
                //成功返回{'res':1},失败{'res':0}
                if(data.res===0){
                    $('#msg').show().html('用户名或密码错误请重试！')//登录失败则显示msg，并在里写入信息
                }else{//成功跳转到books页面
                    location.href='/books'
                }
            })
        })
    })



    /* 【4】信息提示样式 */
#msg{
    display: none;
    color:red;
}


    
    用户名:

    密码:

    
    

    
    

第二步，app1/views.py处理函数登录页面函数登录验证函数

from django.shortcuts import render,redirect #引入重定向简写模块
from app1.models import BookInfo,AreaInfo #从模型下导入bookinfo数据模型
from django.http import HttpResponse,HttpResponseRedirect,JsonResponse #引入返回请求模块、重新定向模块
from datetime import date # 引用时间模块
def login(request):
    '''登录页'''
    return render(request,'app1/login.html')

def login_check(request):
    '''登录校验'''
    #1.获取用户名密码
    username=request.POST.get('username')
    password=request.POST.get('password')
    #2.进行校验，并返回json数据
    if username=='jim' and password=='123':
        #return redirect('/books')
        return JsonResponse({'res':1}) #正确返回1
    else:
        #return redirect('/login')
        return JsonResponse({'res':0}) #错误返回0

第三步，app1/ulrs.py配置

p>

    path('login/',views.login),#登录页
    path('login_check',views.login_check),#登录检测

效果：:8000/login/

不正确：不刷新页面会显示错误信息（姓名、密码），页面还在，不要再次填写），

正确：跳转到页面：8000/books

注意：.py 别忘了设置

设置保存静态文件的目录

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] # 设置静态文件的保存目录