发送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; }
}