Django中实现Ajax的登录验证与json数据

>>最全面的Java面试大纲及答案解析(建议收藏)  

一、json数据

python数据类型与json对应关系表如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
+-------------------+---------------+
        | Python            | JSON          |    
        +===================+===============+
        | dict              | object        |
        +-------------------+---------------+
        | list, tuple       | array         |
        +-------------------+---------------+
        | str               | string        | "string"
        +-------------------+---------------+
        | int, float        | number        |
        +-------------------+---------------+
        | True              | true          |
        +-------------------+---------------+
        | False             | false         |
        +-------------------+---------------+
        | None              | null          |
        +-------------------+---------------+

以上就是关于json的所有数据类型。

什么是json?

定义:

JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式。 它基于 ECMAScript (w3c制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

讲json对象,不得不提到JS对象:

合格的json对象:

1
2
3
4
5
6
7
["one", "two", "three"]
 
{ "one": 1, "two": 2, "three": 3 }
 
{"names": ["张三", "李四"] }
 
[ { "name": "张三"}, {"name": "李四"} ]

不合格的json对象:

1
2
3
4
5
6
7
8
9
10
{ name: "张三", 'age': 32 }                     // 属性名必须使用双引号
 
[32, 64, 128, 0xFFF] // 不能使用十六进制值
 
{ "name": "张三", "age": undefined }            // 不能使用undefined
 
{ "name": "张三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName":  function() {return this.name;}    // 不能使用函数和日期对象
}

python数据类型和json的转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import json
 
d = {'name':'女神', 'age':18}
s = json.dumps(d)
print(s)  # '{"name":"女神", "age":18}'
 
with open("json.txt", "w") as f:
    f.write(s)
# 此时json.txt文件中存放的是json格式的字符串
 
# 将json格式的字符串从文件中读出来
with open("json.txt", "r") as f:
    data = f.read()
 
data = json.loads(data)
print(data)
# 此时的data是python格式的字符串

JavaScript数据类型和json的转换

python数据类型和json转换使用的是dumps和loads,而js和json数据类型之间的转化使用的方法是stringify和parse。

1
2
3
4
5
6
7
8
JSON.parse():     用于将一个 JSON 字符串转换为 JavaScript 对象 
eg:
console.log(JSON.parse('{"name":"Yuan"}'));
console.log(JSON.parse('{name:"Yuan"}')) ;   // 错误
console.log(JSON.parse('[12,undefined]')) ;   // 错误
 
JSON.stringify(): 用于将 JavaScript 值转换为 JSON 字符串。 
eg:  console.log(JSON.stringify({'name':"egon"})) ;

二、Ajax的登录验证

Ajax登录验证特别常用,我们希望当用户输入用户名和密码后在数据库进行校验。校验成功,返回首页给用户;校验失败,提示给用户错误信息。

urls.py:

1
2
3
4
5
6
7
8
9
10
from django.contrib import admin
from django.urls import path
from app01 import views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('handle_ajax/', views.handle_ajax),
    path('cal/', views.cal),
    path('login/', views.login)
]

views.py:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
from django.shortcuts import render, HttpResponse
from app01.models import UserInfo
import json
# Create your views here.
def index(request):
 
    return render(request, "index.html")
 
def login(request):
    if request.method == "POST":
 
        res = {"user":None, "error":""}
 
        user=request.POST.get("user")
        pwd=request.POST.get("pwd")
 
        user_obj=UserInfo.objects.filter(user=user,pwd=pwd).first()
        if user_obj:
            res["user"] = user
        else:
            res["error"] = "用户名或密码错误"
        return HttpResponse(json.dumps(res))
    else:
        return render(request, "login.html")

login.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery-3.4.js"></script>
</head>
<body>
 
<form>
 
    用户名:<input type="text" id="user">
    密码: <input type="password" id="pwd">
    <input type="button" value="提交" class="btn"><span class="error"></span>
    {% csrf_token %}
    <script>
        $(function () {
            $(".btn").click(function () {
                $.ajax({
                    url:"/login/",
                    type:"post",
                    data:{
                        user:$("#user").val(),
                        pwd:$("#pwd").val(),
                        csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
                    },
                    success:function (response) {
                        console.log(response);
                        var res=JSON.parse(response);
                        console.log(res);
                        if (res.user){
                            // 登录成功
                            location.href="/index/"
                        }else{
                            // 登录失败
                            $(".error").html(res.error).css("color", "red");
                            setTimeout(function () {
                                $(".error").html("")
                            },1000)
                        }
                    }
                })
            })
        })
    </script>
 
</form>
 
</body>
</html>

解析:

用户浏览器地址栏访问login页面,get请求给用户登录页面;用户输入用户名密码,点击提交,触发Ajax请求,请求方式为post请求,Ajax将数据打包发给服务器,服务器拿到数据去数据库做校验,校验成功,返回首页给用户,校验失败,返回错误信息。

原文:https://www.cnblogs.com/897463196-a/p/11729528.html