13-Django的ajax请求，同步异步，登录案例，静态文件路径

最新推荐文章于 2024-08-05 17:18:14 发布

SpecYue

最新推荐文章于 2024-08-05 17:18:14 发布

阅读量1.9k

点赞数 6

分类专栏： Django

本文链接：https://blog.csdn.net/qq_34788903/article/details/87897026

版权

Django 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

ajax

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

$.ajax({
	'url':请求地址
	‘type’：请求方式
	‘dataType’：预期返回的数据格式，一般是json
	‘data’：传递的参数
}).success(function(data){
	//执行成功之后的回调函数
})

浏览器前端通过ajax发起请求，Django后台返回json数据return JsonResponse(....)，前端浏览器执行success回调函数

静态文件路径

#设置静态文件的保存目录，在Django中css，js，image都要放在static文件夹中

STATICFILES_DIRS = [os.path.join(BASE_DIR,'static')]

这段代码放在setting.py文件
在这里插入图片描述

ajax请求案例

<!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事件
            $('#btnAjax').click(function () {
                $.ajax({
                    'url':'ajax_handle',
                    'type':'get',
                    'dataType':'json',
                }).success(function (data) {
                    //这个data参数就是Django返回给浏览器的数据
                    alert(data.res)
                })
            })
        })
    </script>
</head>
<body>
<input type="button" id="btnAjax" value="ajax请求">

</body>
</html>

 'url':'ajax_handle',

设置url，去urls.py配置。

  	url(r'^test_ajax$',views.ajax_test),
    url(r'^ajax_handle$',views.ajax_handle),#ajax处理

views.py写视图函数

def ajax_test(request):
    '''显示ajax页面'''
    return render(request,'booktest/ajaxtest.html')

def ajax_handle(request):
    '''处理ajax处理'''
    #返回json数据
    return JsonResponse({'res':1})

一个是显示ajax的页面，一个是处理ajax返回json的函数。返回的data保存在

.success(function (data) { //这个data参数就是Django返回给浏览器的数据 alert(data.res) })
的这个data里面。

ajax登录案例

1.首先分析出请求地址时需要携带的参数
视图函数处理完成之后，所返回的json格式，登录成功[“res”:1]，登录失败[“res”:0]

2.JQuery发起ajax请求

<!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 () {
           $('#btnLogin').click(function () {
               //获取用户名密码，发起ajax请求
               username=$('#username').val();
               password=$('#password').val();

               $.ajax({
                   'url':'/login_ajax_check',
                   'type':'post',
                   'data':{'username':username,'password':password},
                   'dataType':'json'
               }).success(function (data) {
                   //登录成功["res":1]，登录失败["res":0]
                   if(data.res == 0){
                       $('#errmsg').show().html('用户名或密码错误')
                   }
                   else {
                       //跳转到首页
                       location.href = '/index'
                   }
               })
           })
        })
    </script>
    <style>
        #errmsg{
            display: none;
            color: red;
        }
    </style>
</head>
<body>
POST:提交的参数在请求头里，数据比较重要用post
GET:提交的参数在url中
用post方法提交到login_check页面中
<div>
      用户名：<input type="text" id="username">
    密码：<input type="password" id="password">
    <input type="button" value="登录" id="btnLogin">
    <div id="errmsg"></div>
</div>
</body>
</html>

ajax获取用户名和密码，去后台校验，后台返回相应的json数据。如果正确就用前端的location.href = '/index'跳转到首页。

后台的视图函数返回ajax首页和校验ajax

# /login_ajax
def login_ajax(request):
    '''显示ajax登录页面'''
    return render(request,'booktest/login_ajax.html')

def login_ajax_check(request):
    '''ajax登录校验'''
    username = request.POST.get('username')
    password = request.POST.get('password')
    if username == 'zhangyue' and password == '123456':
        return JsonResponse({'res':1})
    else:
        return JsonResponse({'res':0})

配置urls.py

   	url(r"^login_ajax$",views.login_ajax),
    url(r'^login_ajax_check$',views.login_ajax_check),

SpecYue

关注

6
点赞
踩
32

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录