| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <form action="">
- 账号 : <input type="text" id="username" name="username"> <br>
- 密码: <input type="password" id="password" name="password">
- <!-- type: button submit
- button : 无动作按钮需要配合时间去处理
- submit: 点击按钮就会提交表单
- -->
- <input type="button" onclick="login()" value="登录" >
- <input type="button" onclick="handlerResp()" value="处理">
- </form>
- </body>
- <script>
- /**
- * 提交登录界面
- * 有账号有密码还有一个登录按钮
- * 当点击登录按钮 需要把账号和密码信息封装到一个js 对象中
- *
- * 最后把js 对象转成json 字符串
- */
- function login(){
- // 获取用户输入账号和用户输入密码
- var username = document.getElementById("username").value
- var password = document.getElementById("password").value
- var obj = {username: username,password: password}
- // 把js 对象-> json 字符串
- console.log(JSON.stringify(obj));
- }
- /**
- * 假设点击登录, 后台给前台返回了一段json数据格式
- * {
- * success: true,
- * msg: "登录成功"
- * }
- *
- * 我们需要处理后端给前端返回数据
- * json-> js 对象
- * 根据js 对象success 属性判断此次操作是成功还是失败
- */
- function handlerResp(){
- /**
- * 判断输入账号和输入密码如果等于admin 密码等于123
- * '{"success":true,"msg":"登陆成功"}'
- * 如果不等于
- * '{"success":false,"msg":"密码错误"}'
- * @type {string}
- */
- var username = document.getElementById("username").value
- var password = document.getElementById("password").value
- var objJson = ""
- if(username == "admin" && password == "123"){
- objJson = '{"success":true,"msg":"登陆成功"}'
- }else{
- objJson = '{"success":false,"msg":"账号密码错误"}'
- }
- // 需要把后端返回给我们数据转成js 对象
- var obj =JSON.parse(objJson)
- if(obj.success){
- alert("登录成功")
- }else{
- alert("登录失败")
- }
- }
- </script>
- </html>
|
