写一个注册页面代码: 1.使用ajax 2.返回时json的字符串 3.springboot的controller,return 1;
时间: 2024-05-05 09:17:53 浏览: 16
好的,以下是一个简单的注册页面代码,满足您的要求:
HTML:
```
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
function submitForm() {
var data = {
username: $("#username").val(),
password: $("#password").val(),
email: $("#email").val()
};
$.ajax({
type: "POST",
url: "/register",
data: JSON.stringify(data),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(result) {
if(result.code == 0) {
alert("注册成功!");
} else {
alert(result.msg);
}
},
error: function() {
alert("注册失败!");
}
});
}
</script>
</head>
<body>
<h1>注册页面</h1>
<form>
<label>用户名:</label><input type="text" id="username"><br>
<label>密码:</label><input type="password" id="password"><br>
<label>邮箱:</label><input type="text" id="email"><br>
<input type="button" value="注册" onclick="submitForm()">
</form>
</body>
</html>
```
Java:
```
@RestController
public class RegisterController {
@PostMapping("/register")
public String register(@RequestBody User user) {
if(user.getUsername().equals("admin")) { // 假设用户名 "admin" 已被占用
return "{\"code\":1,\"msg\":\"用户名已被占用\"}";
}
// 执行注册逻辑
return "{\"code\":0,\"msg\":\"注册成功\"}";
}
}
```
其中,User 类的定义如下:
```
public class User {
private String username;
private String password;
private String email;
// 省略 getter 和 setter
}
```
当用户点击注册按钮时,会通过 AJAX 异步提交表单数据到 "/register" 接口,请求方法为 POST,请求体为 JSON 格式的字符串。后台将接收到的 JSON 字符串解析成 User 对象,然后执行注册逻辑。如果注册成功,返回 JSON 格式的字符串 {"code":0,"msg":"注册成功"},否则返回 {"code":1,"msg":"错误提示信息"}。前端通过解析返回的 JSON 字符串来显示注册结果。