190910-ajax-请求小结

最新推荐文章于 2022-11-28 10:44:31 发布

鲸鱼编程pyhui

最新推荐文章于 2022-11-28 10:44:31 发布

阅读量213

点赞数

本文链接：https://blog.csdn.net/ifubing/article/details/100689865

版权

事件绑定

对象.事件(匿函)

在这里插入图片描述

长度判断

》获得长度

字符串.length

在这里插入图片描述

条件判断

在这里插入图片描述

ajax格式

见笔记

在这里插入图片描述

页面跳转

在这里插入图片描述

location.href = 网址

往标签中添加内容

                    $("#error_msg").text(data.data);

190910代码

前端代码

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登陆</title>
    <script src="/staticOne/js/jquery-1.12.4.min.js"></script>
    <script>
        $(main);


        function main() {

            {#点击提交，触发事件#}
            {#给提交按钮绑定事件#}
            $("#btn").click(function () {
            {#数据的验证，有内容才提交#}
                var username = $("[name=username]").val();
                var password = $("[name=password]").val();
                {#开关#}
                var flag = true;
                if(username.length<=3 || password.length <=3){
                    flag = false;
            }
                if(flag){

                    sendAjax()

                }else {
                    alert('not vailed')
                }
            });
            {#点击提交按钮，发送ajax请求#}

        }

        function sendAjax() {
                $.ajax({
                url:"/user/login/",
                type: "POST",
                dataType: "json",
                data:{"username":$("[name=username]").val(),
                    "password":$("[name=password]").val()},
        }).done(function (data) {
                {#alert(data)#}
                console.log("返回的数据", data);
                console.log(typeof data);
                console.log(data.stat);
                if(data.stat == 1){
                    {#alert('登陆成功');#}
                    location.href = "/home/"+data.data;
                }else{
                    {#alert('登陆失败');#}
                    $("#error_msg").text(data.data);
                    {#$("#error_msg").html(data.data)#}

                }

            });

        }
    </script>
</head>
<body>

<img src="/staticOne/image/primary/csdnlogo.png" alt="">

<form action="">

    <p>
        用户名：<input type="text" name="username" value="qq123">
    </p>

    <p>
        密码： <input type="password" name="password" value="123123">
    </p>

    <span style="color:red" id="error_msg"></span>

    <p>
        <input id="btn" type="button" value="提交">
    </p>


</form>

</body>
</html>

视图代码


def login(request):
    print('请求成功 ajax')
    print(request.POST)

    if request.method == "GET":
        return render(request, "login.html")
    else:
        # 获取数据
        if not request.POST:
            pass

        user_name = request.POST.get("username")
        password = request.POST.get("password")

        # 把明文转为密文，用密文来查
        md5Obj = hashlib.md5()
        md5Obj.update(password.encode())
        md5_password = md5Obj.hexdigest()
        print(md5_password)

        # 构建一个回复的格式
        res = {"stat":None, "data":None}

        # 接收数据，进行判断
        try:
            obj = models.User.objects.get(user_name=user_name,password=md5_password )
            print("查询成功", obj)
            res["stat"] = 1
            res["data"] = obj.user_name
        except:
            print("查询不到")
            res["stat"] = 0
            res["data"] = "你是不是没醒"


        msg = {"stat": 1, "data":"110"}
        # # 数据由后端传送给前端，需要以字符串的形态传递

        print('查询结查', res)
        import json
        js_res = json.dumps(res)
        return HttpResponse(js_res)