发送json
login.html
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登陆注册</title>
<link rel="stylesheet" href="../../css/style.css">
<script src="../../js/jquery-3.7.0.min.js"></script>
<script src="../../js/jquery.form.js"></script>
</head>
<body>
<div class="content">
<div class="form sign-in">
<h2 class="h2">欢迎回来,果友们!</h2><br/>
<label>
<span>电话</span>
<input type="phone" id="L_phone" name="userName" />
</label>
<label>
<span>密码</span>
<input type="password" id="L_pwd" name="userPasswordHash" />
</label>
<label class="label">
<span class="span">短信验证码</span><br>
<span><input type="text" class="L_note" ></input> </span>
<button class="L_but" type="button">获取验证码</button>
</label>
<button type="button" class="submit" id="submit" >登 录</button>
<a class="login_fg_a" href="../user/login-pwd.html">忘记密码?</a>
</div>
<div class="sub-cont">
<div class="img">
<div class="img__text m--up">
<h1>还未注册?</h1>
<p>立即注册,尝果味人生。</p>
</div>
<div class="img__text m--in">
<h2>已有帐号?</h2>
<p>好久不见了!快进入果粒世界。</p>
</div>
<div class="img__btn">
<span class="m--up">注 册</span>
<span class="m--in">登 录</span>
</div>
</div>
<div class="form sign-up">
<h2>立即注册,果友们!</h2>
<label>
<span>用户名</span>
<input type="text" id="R_user"/>
</label>
<label>
<span>密码</span>
<input type="password" id="R_passwors"/>
</label>
<label>
<span>确认密码</span>
<input type="password" id="R_tpwd"/>
</label>
<label class="label">
<span class="span">短信验证码</span><br>
<span><input type="text" class="L_note" ></input> </span>
<button class="L_but" type="button">获取验证码</button>
</label>
<a href="" class="mml">
<button type="button" class="submit" onclick="">注 册</button>
</a>
</div>
</div>
</div>
</div>
<script src="../../js/script.js"></script>
<script>
$("#submit").click(function (){
let username = $('#L_phone').val();
let password = $('#L_pwd').val();
console.log(username);
console.log(password);
let formData = {
userName: username,
userPasswordHash: password
};
let formData2 = JSON.stringify(formData)
$.ajax({
url: 'http://localhost:80/fshop/user/login',
type: 'POST',
headers: {
'Content-Type': 'application/json'
},
data: formData2,
success: function(result) {
console.log(result)
if(result.code ==200){
localStorage.setItem("token",result.data);
window.location.href = "../../index.html";
}else{
}
},
error: function() {
}
});
})
</script>
</body>
</html>
UserController
package com.fshop.controller;
import com.fshop.entity.User;
import com.fshop.service.IUserService;
import com.fshop.util.ServerResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private IUserService userService;
@GetMapping("{userId}")
@ResponseBody
public User getById(@PathVariable("userId") Integer userId){
User user = userService.getById(userId);
return user;
}
@PostMapping("login")
@ResponseBody
public ServerResult login(@RequestBody User user){
String userPasswordHash = user.getUserPasswordHash();
String userName = user.getUserName();
System.out.println("contoller层"+userName+userPasswordHash);
ServerResult result = userService.login(userName,userPasswordHash);
System.out.println(result);
return result;
}
}
发送对象
login.html
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登陆注册</title>
<link rel="stylesheet" href="../../css/style.css">
<script src="../../js/jquery-3.7.0.min.js"></script>
<script src="../../js/jquery.form.js"></script>
</head>
<body>
<div class="content">
<div class="form sign-in">
<h2 class="h2">欢迎回来,果友们!</h2><br/>
<label>
<span>电话</span>
<input type="phone" id="L_phone" name="userName" />
</label>
<label>
<span>密码</span>
<input type="password" id="L_pwd" name="userPasswordHash" />
</label>
<label class="label">
<span class="span">短信验证码</span><br>
<span><input type="text" class="L_note" ></input> </span>
<button class="L_but" type="button">获取验证码</button>
</label>
<button type="button" class="submit" id="submit" >登 录</button>
<a class="login_fg_a" href="../user/login-pwd.html">忘记密码?</a>
</div>
<div class="sub-cont">
<div class="img">
<div class="img__text m--up">
<h1>还未注册?</h1>
<p>立即注册,尝果味人生。</p>
</div>
<div class="img__text m--in">
<h2>已有帐号?</h2>
<p>好久不见了!快进入果粒世界。</p>
</div>
<div class="img__btn">
<span class="m--up">注 册</span>
<span class="m--in">登 录</span>
</div>
</div>
<div class="form sign-up">
<h2>立即注册,果友们!</h2>
<label>
<span>用户名</span>
<input type="text" id="R_user"/>
</label>
<label>
<span>密码</span>
<input type="password" id="R_passwors"/>
</label>
<label>
<span>确认密码</span>
<input type="password" id="R_tpwd"/>
</label>
<label class="label">
<span class="span">短信验证码</span><br>
<span><input type="text" class="L_note" ></input> </span>
<button class="L_but" type="button">获取验证码</button>
</label>
<a href="" class="mml">
<button type="button" class="submit" onclick="">注 册</button>
</a>
</div>
</div>
</div>
</div>
<script src="../../js/script.js"></script>
<script>
$("#submit").click(function (){
let username = $('#L_phone').val();
let password = $('#L_pwd').val();
console.log(username);
console.log(password);
let formData = {
userName: username,
userPasswordHash: password
};
$.ajax({
url: 'http://localhost:8080/fshop/user/login',
type: 'POST',
data: formData,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
success: function(result) {
console.log(result)
if(result.code ==200){
localStorage.setItem("token",result.data);
window.location.href = "../../index.html";
}else{
}
},
error: function() {
}
});
})
</script>
</body>
</html>
UserController
package com.fshop.controller;
import com.fshop.entity.User;
import com.fshop.service.IUserService;
import com.fshop.util.ServerResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private IUserService userService;
@GetMapping("{userId}")
@ResponseBody
public User getById(@PathVariable("userId") Integer userId){
User user = userService.getById(userId);
return user;
}
@PostMapping("login")
@ResponseBody
public ServerResult login(User user){
String userPasswordHash = user.getUserPasswordHash();
String userName = user.getUserName();
System.out.println("contoller层"+userName+userPasswordHash);
ServerResult result = userService.login(userName,userPasswordHash);
System.out.println(result);
return result;
}
}