api-Django/teste-simples.html at main · elaccel/api-Django · GitHub

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Teste Simples - API</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 600px;
            margin: 50px auto;
            padding: 20px;
        }
        button {
            background-color: #febd69;
            border: none;
            padding: 15px 30px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px;
        }
        #resultado {
            margin-top: 20px;
            padding: 15px;
            background-color: #f5f5f5;
            border-radius: 5px;
            white-space: pre-wrap;
            font-family: monospace;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <h1>Teste Direto com Fetch</h1>

    <button onclick="testarFetchDireto()">Testar Fetch Direto (Produtos)</button>
    <button onclick="testarLogin()">Testar Login</button>

    <div id="resultado">Clique em um botão para testar...</div>

    <script>
        async function testarFetchDireto() {
            const resultado = document.getElementById('resultado');
            resultado.textContent = 'Testando fetch direto...\n\n';

            try {
                resultado.textContent += '1. Fazendo requisição para http://localhost:8000/produtos/\n';

                const response = await fetch('http://localhost:8000/produtos/', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                    }
                });

                resultado.textContent += `2. Status da resposta: ${response.status}\n`;
                resultado.textContent += `3. Response OK: ${response.ok}\n\n`;

                const data = await response.json();
                resultado.textContent += '4. Dados recebidos:\n';
                resultado.textContent += JSON.stringify(data, null, 2);

            } catch (error) {
                resultado.textContent += '\n❌ ERRO CAPTURADO:\n';
                resultado.textContent += `Tipo: ${error.name}\n`;
                resultado.textContent += `Mensagem: ${error.message}\n`;
                resultado.textContent += `Stack: ${error.stack}\n`;

                console.error('Erro completo:', error);
            }
        }

        async function testarLogin() {
            const resultado = document.getElementById('resultado');
            resultado.textContent = 'Testando login...\n\n';

            try {
                resultado.textContent += '1. Fazendo requisição POST para /usuarios/login/\n';

                const response = await fetch('http://localhost:8000/usuarios/login/', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        email: 'maria@example.com',
                        senha: 'Pass1234'
                    })
                });

                resultado.textContent += `2. Status da resposta: ${response.status}\n`;
                resultado.textContent += `3. Response OK: ${response.ok}\n\n`;

                const data = await response.json();
                resultado.textContent += '4. Dados recebidos:\n';
                resultado.textContent += JSON.stringify(data, null, 2);

            } catch (error) {
                resultado.textContent += '\n❌ ERRO CAPTURADO:\n';
                resultado.textContent += `Tipo: ${error.name}\n`;
                resultado.textContent += `Mensagem: ${error.message}\n`;
                resultado.textContent += `Stack: ${error.stack}\n`;

                console.error('Erro completo:', error);
            }
        }

        // Log automático ao carregar
        console.log('Página carregada!');
        console.log('URL atual:', window.location.href);
        console.log('Origem:', window.location.origin);
    </script>
</body>
</html>