Content

ajax实现简单登录页面(ajax登录页面代码)干货满满

文章摘要

这篇文章介绍了前端登录页面的构建,展示了HTML表单元素的使用和JavaScript事件处理的实现。代码中包含用户名、密码输入以及记住用户名的功能,并使用AJAX技术实现数据提交处理。通过简洁的交互设计,实现用户的登录功能。

 <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>登录页面</title> <style> .div1{ display: none; color: red; } </style> <script src=”https://www.jb51.net/static/js/jquery-1.12.4.min.js”></script> <script> $(function () { $(‘#register’).click(function () { // alert(‘ok’); //获取用户名和密码: username=$(‘#username’).val(); password=$(‘#password’).val(); rember=$(‘#rember’).val(); // alert(rember); $.ajax({ url:”/login_ajax_check”, type:”POST”, //提交方式 data:); </script> </head> <body> <div> 用户名:<input type=”text” id=”username” ><br/> 记住用户名:<input type=”checkbox” id=”rember”><br/> 密码<input type=”password” id=”password”><br/> <input type=”submit” value=”登录” id=”register”> <div class=”div1″></div> </div> </body> </html>