首页根据账号密码，发送ajax请求写一个html登录页面并调用后端接口传参

根据账号密码，发送ajax请求写一个html登录页面并调用后端接口传参

时间: 2023-05-26 21:01:23 浏览: 129

A： <!DOCTYPE html> <html> <head> <title>Login Page</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $(document).ready(function(){ $("#login_btn").click(function(){ var username = $("#username").val(); var password = $("#password").val(); $.ajax({ url: "backend.php", type: "POST", data: {username:username, password:password}, success: function(response){ if(response == "success"){ window.location.href = "home.html"; }else{ alert("Invalid username or password!"); } }, error: function(){ alert("Error occured while processing request!"); } }); }); }); </script> </head> <body> <div class="container"> <h2>Login</h2> <form> <div class="form-group"> <label for="username">Username:</label> <input type="text" class="form-control" id="username" placeholder="Enter username"> </div> <div class="form-group"> <label for="password">Password:</label> <input type="password" class="form-control" id="password" placeholder="Enter password"> </div> <button type="button" class="btn btn-primary" id="login_btn">Submit</button> </form> </div> </body> </html> Note: This is just an example HTML code. You need to replace backend.php with your actual backend URL and implement the backend API for processing login credentials. Also, make sure to implement proper security measures to prevent attacks like SQL injection and XSS.

阅读全文