Ajax+SpringBoot注册登录实战_CodingPark编程公园

最新推荐文章于 2022-09-27 22:20:45 发布

VIP文章 TEAM-AG

最新推荐文章于 2022-09-27 22:20:45 发布

阅读量702

点赞数

分类专栏： web技术文章标签：数据库 java

版权由TEAM-AG团队所有

本文链接：https://blog.csdn.net/weixin_38411989/article/details/108074836

版权

基础介绍

本项目实用一下三种技术：

Java
Ajax
SpringBoot

本项目涵盖前端 + 后端 + 数据库

代码实战

前端

log.html

<!DOCTYPE html>
<html lang="zh-CN">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>登陆丨GoStart</title>
<link rel="stylesheet" href="css/style.css">


<body>

<div class="login-container">
	<a href="index.html" style="text-decoration:none;color:white;">
	<h1>先机网</h1>
	</a>
	
	<div class="connect">
		<p>The world listens to you</p>
	</div>
	
	<form>
		<div>
			<input id="logname" type="text" name="username" class="username" placeholder="用户名" autocomplete="off"/>
		</div>
		<div>
			<input id="logpwd" type="password" name="password" class="password" placeholder="密码" oncontextmenu="return false" onpaste="return false" />
		</div>
		<button id="logsubmit" type="button" >登 陆</button>
	</form>

	<a href="register.html">
		<button type="button" class="register-tis">还有没有账号？</button>
	</a>

</div>

</body>
<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
<script src="js/common.js"></script>
<script src="js/log.js"></script>
<!--背景图片自动更换-->
<script src="js/supersized.3.2.7.min.js"></script>
<script src="js/supersized-init.js"></script>
<!--表单验证-->
<script src="js/jquery.validate.min.js?var1.14.0"></script>
</html>

log.js


//ajax  获取后端参数    我写在了整个JS最后

  $("#logsubmit").on('click',  function(event) {
   
    /* Act on the event */
    var data = {
   name:$("#logname").val(),password:$("#logpwd").val()}
    console.log(data);
    $.ajax({
   
      url:"http://localhost:8080/login",
      type:"POST",
      time:'3000', 
      data: data,
      dataType: "json",
      success:function(rsp){
     
        console.log(rsp);    
        if(rsp == 1){
   
          window.location.href="index-L2.html";
        }
      },
      error:function(e) {
   
        /* Act on the event */
        console.log(e);
      }