axios 使用

時間 2019-11-11

標籤 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。