Servlet基础教程(二十五)
Servlet接收表单数据(异步)
servlet的如何获取ajax异步请求提交的json对象。
1.设计表单页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
<h1>用户注册</h1>
<hr>
<div>
<form id="regForm" name="regForm">
<table>
<tr>
<td class="title">用户名：</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td class="title">密码：</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td class="title">确认密码：</td>
<td><input type="password" name="confirmpass"/></td>
</tr>
<tr>
<td class="title">电子邮箱：</td>
<td><input type="text" name="email" value=""/></td>
</tr>
<tr>
<td class="title">薪水：</td>
<td><input type="text" name="salary" value="10000" hidden/></td>
</tr>
<tr>
<td class="title">性别：</td>
<td><input type="radio" value="M" name="gender" checked/>男<input type="radio" value="F" name="gender"/>女
</td>
</tr>
<tr>
<td class="title">学历：</td>
<td>
<select name="education">
<option value="-1" selected>-----请选择-----</option>
<option value="0">文盲</option>
<option value="1">小学</option>
<option value="2">初中</option>
<option value="3">高中</option>
<option value="4">大专</option>
<option value="5">本科</option>
<option value="6">硕士</option>
<option value="7">博士</option>
<option value="8">博士后</option>
<option value="9">圣斗士</option>
</select>
</td>
</tr>
<tr>
<td class="title">籍贯：</td>
<td>
<input list="province" name="province" value=""/>
<datalist id="province">
<option value="河北">
<option value="河南">
<option value="山东">
<option value="山西">
<option value="陕西">
</datalist>
</td>
</tr>
<tr>
<td class="title">出生日期：</td>
<td><input type="date" name="birthday" value=""/></td>
</tr>
<tr>
<td class="title">爱好：</td>
<td>
<input type="checkbox" name="favorites" value="read"/>读书
<input type="checkbox" name="favorites" value="music"/>音乐
<input type="checkbox" name="favorites" value="internet"/>上网
<input type="checkbox" name="favorites" value="nba"/>NBA
</td>
</tr>
<tr>
<td class="title">自我介绍：</td>
<td><textarea rows="10" cols="25" name="introduce"></textarea></td>
</tr>
<tr>
<td class="title">上传照片：</td>
<td><input type="file" name="pic"/></td>
</tr>
<tr>
<td class="title">是否接受条款：</td>
<td><input type="checkbox" name="accept" value="true"/>我无条件接受霸王条款</td>
</tr>
<tr>
<td colspan="2" align="center">
<!--
<input type="submit" value="注册"/>
-->
<input type="button" value="注册" onclick="doReg()"/>
<input type="reset" value="重置"/></td>
</tr>
</table>
</form>
</div>
<script>
function conveterParamsToJson(paramsAndValues) {
let jsonObj = {};
let param = paramsAndValues.split("&");
for (let i = 0; param != null && i < param.length; i++) {
let para = param[i].split("=");
if (jsonObj.hasOwnProperty(para[0])) {
//console.log('该属性已经存在....')
//console.log(para[0]);
//console.log(jsonObj[para[0]])
if (Array.isArray(jsonObj[para[0]])) {
jsonObj[para[0]] = [...jsonObj[para[0]], para[1]]
} else {
jsonObj[para[0]] = [jsonObj[para[0]], para[1]]
}
} else {
jsonObj[para[0]] = para[1];
}
}
return jsonObj;
}
/**
* 将表单数据封装为json
* @param form
* @returns
*/
function getFormData(form) {
let formValues = $("#" + form).serialize()
console.log(formValues)
//关于jquery的serialize方法转换空格为+号的解决方法
formValues = formValues.replace(/\+/g, " "); // g表示对整个字符串中符合条件的都进行替换
let temp = decodeURIComponent(JSON.stringify(conveterParamsToJson(formValues)));
let queryParam = JSON.parse(temp);
return queryParam;
}
function doReg() {
let regUser = {};
//如何把表单数据封装成一个json对象呢。
//let regNode = document.getElementById("regForm");
regUser = getFormData("regForm");
console.log("注册的用户信息是：");
console.log(regUser);
fetch('reg', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(regUser)
}).then((response) => response.json())
.then((response) => {
console.log(response)
}).catch(err => {
console.log(err)
})
}
</script>
</body>
</html>
2.UsersServlet接收json数据
后端servlet接收post异步请求的json对象的思路是：通过流解析请求体内的数据，再把数据转换为json字符串，再使用json工具类转换为java对象。
@WebServlet(name = "UsersServlet", value = "/reg")
public class UsersServlet extends HttpServlet {
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
Map<String,Object> resp = new HashMap<String,Object>();
StringBuilder result = new StringBuilder();
BufferedReader in = null;
PrintWriter outer = response.getWriter();
try{
in = new BufferedReader(new InputStreamReader(request.getInputStream(), StandardCharsets.UTF_8));
String line;
while((line = in.readLine()) != null){
result.append(line);
}
Users u = JSONUtil.toBean(result.toString(), Users.class);
System.out.println("-------注册用户信息---------");
System.out.println(u);
resp.put("code",200);
resp.put("msg","注册成功！");
outer.println(JSONUtil.toJsonStr(resp));
outer.flush();
outer.close();
}catch(IOException e){
e.printStackTrace();
}finally{
try{
if(in != null){
in.close();
}
}catch(IOException e){
e.printStackTrace();
}
}
}
}
后端servlet输出如下结果：
-------注册用户信息---------
Users{username='张三', password='123456', email='zhangsan@qq.com', salary=10000.0, gender='M', education=5, province='陕西', birthday=Sun Aug 15 00:00:00 CST 2004, favorites=[read, music, internet], introduce='我是帅哥', accept='true'}
