ajax案例_Django登录案例实战

最新推荐文章于 2021-08-06 16:36:29 发布

weixin_39830688

最新推荐文章于 2021-08-06 16:36:29 发布

阅读量195

点赞数

文章标签： ajax案例 django jsonresponse django获取div id html登录界面 html登录界面设计代码 html简单登录界面代码

登录主要分为两种，一种是普通的表单登录，另一种是ajax登录。在登录案例中，我们也会设计到HTTPrequest，POST，GET等知识。

普通登录

其实学过web的朋友可能已经知道思路了，在前端写好form表单，然后从后端的HTTPrequest对象里拿到传过来的数据。

讲具体案例之前，大家先搞懂POST，GET请求有啥区别（这里我们只说最大的区别）:

POST所传的信息是保存在请求头当中（适合安全性较高的数据）

GET则是显示在url当中的， 简单举个例子：http://www.xxxxx.com/login？user=xxxx&&password=xxxxx

理解完这个就好办，因为我们这里只讲post方法，get方法大家可以自己动手去试试。

那我们的代码就正式开始了。

1.新建login.html并写好表单

<!DOCTYPE html>

大家需要注意的是底下这一行代码

首先method参数是选用何种方式传送数据，这里显然是post方法。action所对应的就是检查表单中的数据是否正确的视图函数， 例如这里我们就是检查账号密码是否正确。

这里我还得说下为什么需要两个斜线，前面那根斜线是必须得，只是后面这根...如果你不输，那你会报一下错误：

RuntimeError: You called this URL via POST, but the URL doesn’t end in a slash and you have APPEND_SLASH set.

解决的办法有两个： 第一种就是像我上面那样在最后一个字母后加上一根斜线，第二种方法需要在setting文件当中设置APPEND_SLASH=False。

2.在views中编写相应的视图函数

首先我们需要创建login.html所对应的视图函数login

def

因为这里我们只需要显示login.html，这个界面所以直接返回这个界面就行了。

然后我们来创建检测账号密码是否正确的视图函数login_submit

def

大家可能注意到获取post过来的参数，使用的是如下语句

# 使用request.POST.get来获取相关的参数

这里需要说一下，HttpRequest对象的属性GET、POST都是QueryDict类型的对象，与python字典不同，QueryDict类型的对象用来处理同一个键带有多个值的情况，如果一个键同时拥有多个值将获取最后一个值，如果键不存在则返回None值，可以设置默认值进行后续处理。

如果想要获取同一个键的所有值，可以通过方法getlist()获取。

HTTPrequest对象的属性

下面给大家补充一下相关的属性，大家可以依次去尝试。

path：一个字符串，表示请求的页面的完整路径，不包含域名和参数部分。
method：一个字符串，表示请求使用的HTTP方法，常用值包括：'GET'、'POST'。在浏览器中给出地址发出请求采用get方式，如超链接。在浏览器中点击表单的提交按钮发起请求，如果表单的method设置为post则为post请求。
encoding：一个字符串，表示提交的数据的编码方式。如果为None则表示使用浏览器的默认设置，一般为utf-8。这个属性是可写的，可以通过修改它来修改访问表单数据使用的编码，接下来对属性的任何访问将使用新的encoding值。
GET：QueryDict类型对象，类似于字典，包含get请求方式的所有参数。
POST：QueryDict类型对象，类似于字典，包含post请求方式的所有参数。
FILES：一个类似于字典的对象，包含所有的上传文件。
COOKIES：一个标准的Python字典，包含所有的cookie，键和值都为字符串。
session：一个既可读又可写的类似于字典的对象，表示当前的会话，只有当Django 启用会话的支持时才可用，详细内容见"状态保持"。

ajax登录

这里我先来简单介绍一下ajax是什么？

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。（来自百度百科）

在我们上面的表单登录时，会发现每次提交账号密码，都会重新刷新一遍页面(如果账号密码错误)，其实我们可以通过ajax来避免这种事情。

在Django中ajax的运行原理跟上图差不多，从浏览器发送ajax请求至服务器，服务器进行处理并且返回一个JsonResponse对象，然后返回json数据，执行回调函数。

★ 在浏览器中使用javascript发起ajax请求时，返回json格式的数据。类JsonResponse继承自HttpResponse对象，被定义在django.http模块中，创建对象时接收字典作为参数。
”

接下来我们就正式讲解ajax的登录：

1.导入jQuery的文件，并写好html界面及ajax代码

jQuery文件我推荐个网站，大家自行下载：

http://www.jq22.com/jquery-info122

随后导入到static中的js文件中

login_ajax.html

<!DOCTYPE html>

上述html代码中id为errmsg的div是用来提示我们账号密码错误的。

2.编写视图函数

视图函数login_ajax_handler：

def

3.结果

来自：JAVAAndPython君