2021-11-02登录交互

最新推荐文章于 2023-09-23 11:45:00 发布

是数学系的小孩儿

最新推荐文章于 2023-09-23 11:45:00 发布

阅读量127

点赞数

分类专栏：前端学习记录文章标签：交互 javascript 前端

本文链接：https://blog.csdn.net/qq_51082388/article/details/121109797

版权

前端学习记录专栏收录该内容

31 篇文章 0 订阅

订阅专栏

实现功能：登录与后台进行交互
逻辑关系：先判断两次输入密码是否相同，不相同就用else(前端干的活)，这个密码只传给后台一个，所以在#var psd = $(’#mima2’).val(); 的时候只写出来一个mima就行.
在这里插入图片描述
之后是
在里边写相同里Ajax（包括成功函数和出错函数），在成功函数里边写是不是后台的数据并且判断类型。

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>登陆\</title>
		<script src="./jquery-3.4.1.min.js"></script>
		<link rel="stylesheet" href="yyy.css">
		<script>
			//function box-btn()
			//{
			//	var j=document.getElementById('box-one active');
			//		var l=document.getElementById('box-one');
			//		if(j==l)
			//		{

			//		}
			//		else
			//		(密码输入错误)
			//}

			$(function() {
				$("#login").click(
					function() {
						var account = $('#user').val();
						var psd = $('#mima2').val();
						var oPtt = $('#user').val();
						var oBtn = $('#box-btn').val();
						var oPas1 = $('#mima1').val();
						var oPas2 = $('#mima2').val();
                       console.log(psd)
                       console.log(account)
                                           
						if (oPas1 == oPas2) {
                      //if (oPas1.val() == oPas2.val())重复错误
							$.ajax({
								url: 'http://47.94.12.165:8889/login', //后台给的
								type: 'post',
								//async:true,
								data: {
									'username': account,
									'password': psd
								},

								success: function(a) {
									console.log(a)
									if (a == "登录成功！")
										window.open("https://www.baidu.com/");
									if (a == "用户名不存在")
										alert(a)
									if (a == "密码错误!")
										alert(a)
								},




								error: function(e) {
									console.log(e)
								}
							})



						} else {
							alert('两次密码输入不一样');
						}

					}
				)

			})
		</script>


	</head>
	<body>
		<div class="box">
			<div class="box-logo">
				<img src="./yyy.png" alt="">
			</div>
			<div class="box-first">
				<input id="user" type="text" placeholder="用户名">

			</div>
			<div class="box-one active">
				<input id="mima1" type="password" placeholder="输入密码">

			</div>
			<div class="box-one">
				<input id="mima2" type="password" placeholder="请再次输入密码">
			</div>
			<div class="box-text">
				<span>新用户登陆即自动注册，并表示已同意<a href="https://www.baidu.com/">《用户服务协议》</a></span>
			</div>
			<div class="box-btn">
				<button id="login">登陆</button>
			</div>
			<div class="box-we">
				<span><a href="https://www.baidu.com/">关于我们</a></span>
			</div>
		</div>
	</body>
</html>

        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: #fff;
        }
        .box{
            width: 300px;
            margin: 50px auto;
            /* background: #999; */
        }
        .box-logo{
            width: 300px;
            text-align: center;
        }
        .box-logo img{
            width: 150px;
            margin:auto;
            padding-bottom: 20px;
        }
        .box-one{
            width: 298px;
            height: 50px;
            /* background: #000; */
            margin-bottom: 20px;
            border: 1px solid #999;
            border-radius: 5px;
            position: relative;
        }
		.box-first input{
		    width: 298px;
		    height: 50px;
		    /* background: #000; */
		    margin-bottom: 20px;
		    border: 1px solid #999;
		   
		    position: relative;
			outline: none;
		}
        .box-one input{
            width: 280px;
            height: 48px;
            border: none;
            position: absolute;
            left: 8px;
            font-size: 16px;
            outline: none;
        }
		
        .active span{
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 14px;
            color: #999;
            cursor: pointer;
        }
        .active span:hover{
            color: #2395ff;
        }
        .box-text{
            width: 300px;
            text-align: left;
            padding-bottom: 20px;
        }
        .box-text span{
            font-size: 14px;
            color: #999;
        }
        .box-text a{
            text-decoration: none;
            color: #2395ff;
            cursor: pointer;
        }
        .box-btn{
            width: 300px;
            padding-bottom: 20px;
        }
        .box-btn button{
            width: 300px;
            height: 45px;
            border-radius: 5px;
            border: none;
            background: #4cd964;
            font-size: 18px;
            color: #fff;
            cursor: pointer;
        }
        .box-we{
            width: 300px;
            text-align: center;
        }
        .box-we span{
            font-size: 14px;
            color: #999;
            cursor: pointer;
        }

是数学系的小孩儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
2021-11-02登录交互

实现功能：登录与后台进行交互逻辑关系：先判断两次输入密码是否相同，不相同就用else(前端干的活)，这个密码只传给后台一个，所以在#var psd = $(’#mima2’).val(); 的时候只写出来一个mima就行.之后是在里边写相同里Ajax（包括成功函数和出错函数），在成功函数里边写是不是后台的数据并且判断类型。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8">
复制链接

扫一扫