ajax 的简单请求,get的加法运算,post加法运算,用户登录认证

怼烎@ 2021-09-30 14:24 221阅读 0赞

视图函数部分

from django.shortcuts import render, HttpResponse
    import time
    from app01.models import User
    import json
    
    # Create your views here.
    def index(request):
    
        return render(request,"index.html")
    
    def books(request):
        time.sleep(5)
        return HttpResponse("群山淡静")
    
    
    #ajax 加法运算  get请求
    # def cal(request):
    #     a=request.GET.get("a")   #获取第一个值,类型是字符串
    #     b=request.GET.get("b")   #获取第二个值
    #     res=int(a)+int(b)        #转换成数字再计算
    #     return HttpResponse(str(res)) #HttpResponse只接受字符串
    
    
    #ajax 加法运算  post请求
    def cal(request):
        a=request.POST.get("a")
        b=request.POST.get("b")
        res= int(a)+int(b)
        return HttpResponse(str(res))
    
    
    #基于ajax 进行登录验证
    def addrecord(request):
        User.objects.create(id=1, user="xiao", pwd=123)
        User.objects.create(id=2, user="zhang", pwd=111)
    
    def login(request):
        if request.method=="POST":
            print(request.POST)
            user=request.POST.get("user") #"user"对应的是ajax请求里面提交的数据
            pwd=request.POST.get("pwd")
            #根据表单的用户名和密码到数据库中匹配
            user_obj=User.objects.filter(user=user,pwd=pwd).first()
    
            #一般请求下,需要定义一个字典. msg是约定俗成的名字
            response={
        "user":None,"error":""}
            if user_obj: #user_obj有值的时候    判断有返回结果的请求下
                response["user"]=user_obj.user  #修改字典的用户名
                # return HttpResponse(response)
            else:
                response["error"]="用户名和密码不一致"  #修改提示信息
                # return HttpResponse(response)
    
        #返回json格式数据,默认序列化时,对中文默认使用ascii编码
        #ensure_ascii=False  表示显示真正的中文
            return HttpResponse(json.dumps(response,ensure_ascii=False))
        else:
            return render(request,"login.html")

HTML网页显示部分

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/static/js/jquery-3.3.js"></script>
    </head>
    <body>
    <h4>INDEX页面</h4>
    
    
    
    <button id="btn">click</button>
    
    <script>
        $("#btn").click(function(){
            alert(123)
            }
        )
    </script>
    <hr>
    
    
    
    
    
    {# ajax加法运算   post请求#}
    <input type="text" id="n1"> + <input type="text" id="n2">=
    <input type="text" id="result">
    <button id="cal">计算</button>
    {% csrf_token %}
    <script>
        $("#cal").click(function(){
            var n1=$("#n1").val();
            var n2=$("#n2").val();
            var csrf = $("[name=csrfmiddlewaretoken]").val();
            //发送ajax请求
            $.ajax({
                url: "/cal/",  //请求的url
                type: "post",  //默认get
                data: {
                    a: n1,
                    b: n2,
                    csrfmiddlewaretoken:csrf,
                },
                success: function (data) { //data接收响应体,必须要有
                    console.log(data);  //打印响应体数据
                    $("#result").val(data);  //修改p标签的text值
                }
            })
        })
    </script>
    
    
    </body>
    </html>

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="/static/js/jquery-3.3.js"></script>
    </head>
    <body>
    <h4>登录页面</h4>
    
    <form>
        用户名<input type="text" id="user">
        密码<input type="password" id="pwd">
        <input type="button" value="提交" id="login_btn">
        {# 显示错误信息 #}
        <span class="error"></span>
    </form>
    {% csrf_token %}
    <script>
        $("#login_btn").click(function(){ //找到标签绑定事件
            var csrf = $("[name=csrfmiddlewaretoken]").val();
    
            //发送ajax请求  登录认证
            $.ajax({
                url: "/login/",
                type: "post",
                data: {
                    user: $("#user").val(), //找到input标签,用.value()获取用户输入的值
                    pwd: $("#pwd").val(),
                    csrfmiddlewaretoken: csrf,
                },
                success: function (data) { //data接收响应体,必须要有
                    console.log(data); //打印响应体  json字符串
                    {#console.log(typeof data);//打印数据类型#}
                    var data = JSON.parse(data);//反序列化数据  把字符串转换成支持的类型
                    console.log(data); //反序列化出来的对象
    
                    //登录成功
                    if (data.user) { //把上一步反序列化的数据 取user 看看不是不为空 如果不为空 登录成功
                        //登录成功后, 用location对象  会跳转到的页面
    
                        location.href="/index/"
                    } else {
                        //登录失败
                        $(".error").html(data.error).css("color", "red");//data反序列化出来的对象
                                    //.html是给error这个标签赋值
    
                        //显示错误信息,  显示2秒之后消失   function()是匿名函数
                        //.html()里面没有引号相当于取值, .html("")加上引号才是清空
                        setTimeout(function () {
                            $(".error").html("")
                        }, 2000)
                    }
                }
            })
    
        })
    
    </script>
    
    </body>
    </html>

转载于:https://www.cnblogs.com/kenD/p/9878364.html