1.layui 控件不显示
需要加入下列代码，监听form，才会显示控件
<body>
.......内容
<script>
layui.use('form', function () {
var form = layui.form;
});
</script>
</body>
2.通过serverlet后端获取前端复选框的值
<form action="/addPreferMovies" class="layui-form" method="post">
<%-- --%>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="checkbox" name="like" value="Western" title="Western 西部">
<input type="checkbox" name="like" value="Music" title="Music 音乐">
<input type="checkbox" name="like" value="Animation" title="Animation 动画">
<input type="checkbox" name="like" value="War" title="War 战争">
<br>
<br>
<input type="checkbox" name="like" value="Action" title="Action 动作">
<input type="checkbox" name="like" value="Adventure" title="Adventure 冒险">
<input type="checkbox" name="like" value="Comedy" title="Comedy 喜剧">
<input type="checkbox" name="like" value="Crime" title="Crime 犯罪">
<br>
<br>
<input type="checkbox" name="like" value="Science" title="Science 科幻">
<input type="checkbox" name="like" value="Thriller" title="Thriller 惊悚">
<input type="checkbox" name="like" value="Fantasy" title="Fantasy 奇幻">
<input type="checkbox" name="like" value="Mystery" title="Mystery 疑案">
<br>
<br>
<input type="checkbox" name="like" value="Family" title="Family 家庭">
<input type="checkbox" name="like" value="Foreign" title="Foreign 国外">
<input type="checkbox" name="like" value="History" title="History 历史">
<input type="checkbox" name="like" value="Drama" title="Drama 戏剧">
<br>
<br>
<input type="checkbox" name="like" value="Romance" title="Romance 浪漫">
<input type="checkbox" name="like" value="Horror" title="Horror 恐怖">
<input type="checkbox" name="like" value="Documentary" title="Documentary 记录片">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
</div>
</div>
</form>
image.png
后端
//用于解决冷启动问题，主要接受用户选择的偏好的电影类型
@RequestMapping("/addPreferMovies")
public void addPreferMovies(HttpServletRequest request, HttpServletResponse response)throws Exception {
response.getWriter().append("Served at: ").append(request.getContextPath());
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
//获取用户爱好
//likes 里由前端选择的对应框的value值
String[] likes = request.getParameterValues("like");
3.页面加载时Ajax请求后端
前端
<!-- onload -->
<body onload="load()">
<script>
function load() {
var Data = null;
$.ajax({
url:'http://localhost:8080/test111?num='+4,
type:"get",
dataType:"json",
success : function(data) {
Data=data;
},
}
)
return Data;
}
</script>
</body>
后端
@RestController
public class WebPageController {
@GetMapping("/test111")
public Object addStudentDispose(@RequestParam(value = "num", defaultValue = "8") String num2) throws IOException {
System.out.println(num2);
HashMap<String, ArrayList<Recommendation>> stringArrayListHashMap = new HashMap<>();
ArrayList<Recommendation> objects = new ArrayList<>();
objects.add(new Recommendation(3,4.4));
objects.add(new Recommendation(44,4.4));
objects.add(new Recommendation(35,4.4));
objects.add(new Recommendation(38,4.4));
stringArrayListHashMap.put("test",objects);
ArrayList<Recommendation> objects2 = new ArrayList<>();
objects2.add(new Recommendation(3,4.4));
objects2.add(new Recommendation(44,4.4));
objects2.add(new Recommendation(35,4.4));
objects2.add(new Recommendation(38,4.4));
stringArrayListHashMap.put("2",objects2);
ArrayList<Recommendation> objects3 = new ArrayList<>();
objects3.add(new Recommendation(3,4.4));
objects3.add(new Recommendation(44,4.4));
objects3.add(new Recommendation(35,4.4));
objects3.add(new Recommendation(38,4.4));
stringArrayListHashMap.put("3",objects3);
ArrayList<Recommendation> objects4 = new ArrayList<>();
objects4.add(new Recommendation(3,4.4));
objects4.add(new Recommendation(44,4.4));
objects4.add(new Recommendation(35,4.4));
objects4.add(new Recommendation(38,4.4));
stringArrayListHashMap.put("4",objects4);
Object o = JSON.toJSON(stringArrayListHashMap);
return o;
}
