Python 框架之 Django ajax 局部页面刷新的简单介绍，和 ajax 简单登录案例上的使用

拼搏现实的明天。 2022-11-09 12:55 244阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70][]

# Python 框架 之 Django ajax 局部页面刷新的简单介绍，和 ajax 简单登录案例上的使用 #

**目录**

Python 框架 之 Django ajax 局部页面刷新的简单介绍，和 ajax 简单登录案例上的使用

一、简单介绍

二、Ajax登录案例分析

1、显示出登录页面

2、登录校验功能

三、没有 ajax 的简单登录实现

1、在工程中实现两个简单的 html 页面

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

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

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

四、带有  ajax 的简单登录实现

1、实现一个带有 ajax 功能的 html

2、构建一个 static 文件夹，js 文件夹下添加 jquery-1.12.4.min.js 脚本

3、在 settings 中添加 static 文件夹的目录信息

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

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

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文件都是静态文件。
> 
> ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1][]
> 
> 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 环境的快速搭建与验证的相关说明][1_Python _ _ Anaconda _ Django]

[2）Python 框架 之 Django MVT 下的 V 的 视图简单介绍和使用][2_Python _ _ Django MVT _ V _]

### 1、在工程中实现两个简单的 html 页面 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6][]

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

![20210315154015922.gif][]

## 四、带有  ajax 的简单登录实现 ##

### 1、实现一个带有 ajax 功能的 html ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7][]

代码：

<!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 脚本 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 8][]

### 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')\]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 9][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 10][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 11][]

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

![20210315213124532.gif][]

## 附录： ##

### 1、测试中，解决报错：Forbidden (403)   CSRF verification failed. Request aborted. ###

错误如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 12][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 13][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 14][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70]: /images/20221023/f2990e1ec4e34a15aabd5651cdc9df5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1]: /images/20221023/57afa44006eb4a138d804b4e4c429655.png
[1_Python _ _ Anaconda _ Django]: https://blog.csdn.net/u014361280/article/details/114481368
[2_Python _ _ Django MVT _ V _]: https://blog.csdn.net/u014361280/article/details/114485700
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2]: /images/20221023/7d760a33c8cf4531a9aa246b396e68bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3]: /images/20221023/6b998abafe9a4e9da45bc54069088fea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4]: /images/20221023/1dd58154c03b4cacb238805b3230f6f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5]: /images/20221023/2b62c445fc21416a9a99de2e88c81929.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6]: /images/20221023/b5927c8c7a7d402d872ce1d4c1d35c89.png
[20210315154015922.gif]: /images/20221023/3154971b9dac41078e33776edc6c53e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7]: /images/20221023/a8b3623f479c4060b599deb6e1991c5f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 8]: /images/20221023/7ff54426119c4a799bab6456acbc6781.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 9]: /images/20221023/87f2932326b5417caca6665242122957.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 10]: /images/20221023/c0573580cbf14c51a2b0f2feba39d8c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 11]: /images/20221023/ba0fd9a269b8430c815ff6827f7b58ae.png
[20210315213124532.gif]: /images/20221023/934adfa17310410b87948ec29caf52cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 12]: /images/20221023/782d93ff4e3f466c8d46bea3d0d862c2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 13]: /images/20221023/5402160c1b0d4ade9423f4fd7991af0e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 14]: /images/20221023/43958c8f88e34dc6923c8e534254d628.png