axios 使用

<!DOCTYPE html>
<html lang="en">
<head>
    {#导入静态文件#}
    {% load static %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登陆页面</title>
    {# 导入jquery #}
    <script src="{% static 'js/jquery-1.12.1.min.js' %}"></script>
    {# 导入axios库 #}
    <script src="{% static 'js/axios.js' %}"></script>
</head>
<body>
    <h1>欢迎登陆</h1>
    <label>用户名</label> <input id="username" type="text"><br>
    <label>密码</label> <input id="password" type="password"><br>
    <span style="display:none" id="waite"> 请稍后，正在提交您的请求。。。。<br> </span>
    <input onclick="login()" id="sub" type="button" value="提交">
    <script>
        
        //定义登陆方法
        function login(){
            var username = $('#username').val()
            var password = $('#password').val()
            //使用axios来请求接口
            //初始化传参
            let param = new URLSearchParams();
            //将参数传递给对象
            param.append('username',username);
            param.append('password',password);

            axios({
                //指定请求地址
                url:'/supermarket/do_login',
                //请求参数
                data:param,
                //请求类型
                method:'post',
                //返回值类型
                responseType:'text'
            })
            .then(function(obj){
                // //将按钮失效去除
                // $('#sub').removeAttr('disabled');
                // //将提示文字隐藏
                // $('#waite').hide();
                console.log(obj);
                alert(obj.data);
                //判断登陆是否成功
                if (obj.data == '登陆成功'){
                    //跳转
                    window.location.href = '/supermarket/productlist'
                }
            });
        }
    
    </script>
</body>
</html>
猜你喜欢
