前后端交互

     <!DOCTYPE html>

     <html lang="en">

     <head>

         <meta charset="UTF-8">

         <meta name="viewport" content="width=device-width, initial-scale=1.0">

         <title>登录页面</title>

     </head>

     <body>

         <h2>登录</h2>

         <form id="loginForm">

             <label for="username">用户名:</label>

             <input type="text" id="username" name="username" required>

             <br><br>

             <label for="password">密码:</label>

             <input type="password" id="password" name="password" required>

             <br><br>

             <button type="submit">登录</button>

         </form>

 

         <script>

             document.getElementById('loginForm').addEventListener('submit', function(event) {

                 event.preventDefault();

 

                 const username = document.getElementById('username').value;

                 const password = document.getElementById('password').value;

 

                 fetch('/login', {

                     method: 'POST',

                     headers: {

                         'Content-Type': 'application/json'

                     },

                     body: JSON.stringify({ username, password })

                 })

                 .then(response => response.json())

                 .then(data => {

                     if (data.success) {

                         alert('登录成功!');

                     } else {

                         alert('登录失败: ' + data.message);

                     }

                 })

                 .catch(error => console.error('Error:', error));

             });

         </script>

     </body>

     </html>

     

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值