
Python 框架 之 Django ajax 局部页面刷新的简单介绍,和 ajax 简单登录案例上的使用
目录
Python 框架 之 Django ajax 局部页面刷新的简单介绍,和 ajax 简单登录案例上的使用
2、构建一个 static 文件夹,js 文件夹下添加 jquery-1.12.4.min.js 脚本
3、在 settings 中添加 static 文件夹的目录信息
6、运行项目,登录界面,登陆失败也不是刷整个页面,而是局部提示信息,如下
1、测试中,解决报错:Forbidden (403) CSRF verification failed. Request aborted.
一、简单介绍
Python是一种跨平台的计算机程序设计语言。是一种面向对象的动态类型语言,最初被设计用于编写自动化脚本(shell),随着版本的不断更新和语言新功能的添加,越多被用于独立的、大型项目的开发。Python是一种解释型脚本语言,可以应用于以下领域: Web 和 Internet开发、科学计算和统计、人工智能、教育、桌面界面开发、软件开发、后端开发、网络爬虫。
本节介绍,使用 Django 框架搭建一个工程,并应用跑起来的方法,初步认识一下 Django。
Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。
Django 是一个开放源代码的 Web 应用框架,由 Python 写成。
Django 采用了 MVT 的软件设计模式,即模型(Model),视图(View)和模板(Template)。
Ajax 基本概念
异步的javascript。在不全部加载某一个页面部的情况下,对页面进行局的刷新,ajax请求都在后台。
图片,css文件,js文件都是静态文件。
ajax 请求过程:
1)发起ajax请求:jquery发起
2)执行相应的视图函数,返回json内容
3)执行相应的回调函数。通过判断json内容,进行相应处理
二、Ajax登录案例分析
首先分析出请求地址时需要携带的参数,视图函数处理完成之后,所返回的json的格式。
1、显示出登录页面
1)设计url,通过浏览器访问网址时显示登录页面
2)设计url对应的视图函数login_ajax
3)编写模板文件login_ajax.html,在里面写jquery代码发起ajax请求
2、登录校验功能
1)设计url,点击登录页的登录按钮发起请求校验网址时进行登录校验
2)设计url对应的视图函数 my_login_ajax_check。
接收post提交过来的数据。
进行登录校验,并返回json内容,即是JsonRepsone。
其中,Json格式如下:
{'res':'1'} #表示登录成功
{'res':'0'} #表示登录失败
三、没有 ajax 的简单登录实现
构建简单的网页环境,可以参见如下博文,这里不再赘述:
1)Python 框架 之 Anaconda 下 Django 环境的快速搭建与验证的相关说明
2)Python 框架 之 Django MVT 下的 V 的 视图简单介绍和使用
1、在工程中实现两个简单的 html 页面


2、views.py 中实现显示页面逻辑

3、 urls.py 中配置网址和视图的映射关系


4、登录效果下,每次页面用户名和密码都会刷新掉

四、带有 ajax 的简单登录实现
1、实现一个带有 ajax 功能的 html

代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>login_ajax</title>
<script src="/static/js/jquery-1.12.4.min.js"></script>
<script>
$(function () {
$('#btnLogin').click(function() {
// 1、获取用户名和密码
username = $('#username').val()
password = $('#password').val()
// 2、发起 post ajax 请求,/my_login_ajax_check,携带用户名和密码
$.ajax({
'url':'/my_login_ajax_check',
'type':'post',
'data':{'username':username, 'password':password},
'dataType':'json'
}).success(function(data){
// 定义失败 返回{'res':0}
// 定义成功 返回{'res':1}
if(data.res == 0){
$('#errmsg').show().html('用户名或密码错误')
}
else{
// 跳转到我的主页
location.href = '/myhomepage'
}
})
})
})
</script>
<style>
#errmsg{
display:none;
color:red;
}
</style>
</head>
<body>
<h1>带有 ajax 的简单登录实现</h1>
Post: 提交的参数请求头,数据安全行要求比较高的时候使用 post<br/>
GET:提交的参数在 url 中会显示
<div>
用户名:<input type="text" id="username"><br/>
密码:<input type="password" id="password"><br/>
<input type="button" id="btnLogin" value="登录">
<div id="errmsg"></div>
</div>
</body>
</html>
2、构建一个 static 文件夹,js 文件夹下添加 jquery-1.12.4.min.js 脚本

3、在 settings 中添加 static 文件夹的目录信息
# 设置静态我呢见的保存目录 (不然会报错 GET http://127.0.0.1:8001/static/js/jquery-1.12.4.min.js net::ERR_ABORTED 404 (Not Found))
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]

4、在 views.py 添加 ajax 相关逻辑

5、添加 网址与视图页面的映射关系

6、运行项目,登录界面,登陆失败也不是刷整个页面,而是局部提示信息,如下

附录:
1、测试中,解决报错:Forbidden (403) CSRF verification failed. Request aborted.
错误如下:

解决方式:注释掉 settings.py 的 'django.middleware.csrf.CsrfViewMiddleware' 代码 即可


