Django(十二)视图

图片[1]-Django(十二)视图-唐朝资源网

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

图片[2]-Django(十二)视图-唐朝资源网

2.2 Ajax异步和同步请求控制(上一步的第4步)

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

在 /app1/.html 中 p>




    
    ajax
    
    
        $(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】
            })

图片[3]-Django(十二)视图-唐朝资源网

}) #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) {

图片[4]-Django(十二)视图-唐朝资源网

// 进行处理 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]-Django(十二)视图-唐朝资源网

登录页面 // 【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' } }) }) })

图片[6]-Django(十二)视图-唐朝资源网

/* 【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')

图片[7]-Django(十二)视图-唐朝资源网

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

图片[8]-Django(十二)视图-唐朝资源网

注意:.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')] # 设置静态文件的保存目录

© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片