表示学生の情報収集
- 学生情報の収集のための書き込み制御組立方法
@ResponseBody
@RequestMapping("/showlist")
public List<Student> showlist(){
List<Student> list=new ArrayList<>();
Student stu1=new Student("张三",22);
Student stu2=new Student("李四",21);
Student stu3=new Student("王五",20);
Student stu4=new Student("赵六",25);
list.add(stu1);
list.add(stu2);
list.add(stu3);
list.add(stu4);
return list;
}
- Ajaxのリクエストや書き込み情報ページ
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>Title</title>
<!--导入jQuery函数库-->
<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function show() {
$.ajax({
url:"${pageContext.request.contextPath}/admin/showstu.action",
type:"post",
dataType:"json",
success:function (stu) {
var s=stu.name+"----------"+stu.age;
$("#showStu").html(s);
},
error:function (e) {
alert(e.message);
}
});
}
function showlist() {
$.ajax({
url:"${pageContext.request.contextPath}/admin/showlist.action",
type:"post",
dataType:"json",
success:function (list) {
var s="";
for(var i=0;i<list.length;i++){
var stu=list[i];
s=s+stu.name+"------------"+stu.age+"<br>"
}
$("#showArray").html(s);
},
error:function (e) {
alert(e.message);
}
});
}
</script>
<p><a href="${pageContext.request.contextPath}/admin/showstu.action">显示学生信息（原始方法）</a></p>
<p><a href="javascript:show()">显示学生信息(单个数据)</a></p>
<p><a href="javascript:showlist()">显示学生信息(数据集合)</a></p>
<div id="showStu"></div>
<div id="showArray"></div>
</body>
</html>
- 業績
第二に、ディスプレイ学生情報収集の最適化
- 思考の最適化
がより簡単にラベルスタイルのページで更新されるために、最適化された方法を要求する必要がある
サーバに（1）開始または非同期AJAXリクエストを
（2）セッションに格納されたデータを取得するために、その後に任意のデータバックを運ぶことはありません単に位置を要求
成功方法（3）AJAXリフレッシュ表示データテーブル（表）
（4）は、単にセッションから取得した再読み込みデータに必要非同期リフレッシュを形成します
- 情報のページを書き、JSTLタグライブラリを導入し、表スタイルを書き込むためのAjaxリクエスト
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>Title</title>
<!--导入jQuery函数库-->
<script src="js/jquery-3.3.1.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function show() {
$.ajax({
url:"${pageContext.request.contextPath}/admin/showstu.action",
type:"post",
dataType:"json",
success:function (stu) {
var s=stu.name+"----------"+stu.age;
$("#showStu").html(s);
},
error:function (e) {
alert(e.message);
}
});
}
function showlist() {
$.ajax({
url:"${pageContext.request.contextPath}/admin/showlist.action",
type:"post",
dataType:"json",
success:function (list) {
var s="";
for(var i=0;i<list.length;i++){
var stu=list[i];
s=s+stu.name+"------------"+stu.age+"<br>"
}
$("#showArray").html(s);
},
error:function (e) {
alert(e.message);
}
});
}
function you() {
$.ajax({
url:"${pageContext.request.contextPath}/admin/youhua.action",
type:"post",
success:function () {
$("#youhua").load(location.href+" #youhua");
},
error:function (e) {
alert(e.message);
}
});
}
</script>
<p><a href="${pageContext.request.contextPath}/admin/showstu.action">显示学生信息（原始方法）</a></p>
<p><a href="javascript:show()">显示学生信息(单个数据)</a></p>
<p><a href="javascript:showlist()">显示学生信息(数据集合)</a></p>
<p><a href="javascript:you()">显示学生信息(优化)</a></p>
<div id="showStu"></div>
<div id="showArray"></div>
<div id="youhua">
<table style="background-color: beige;width: 200px;height: 100px">
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
<c:forEach items="${list}" var="stu">
<tr>
<td>${stu.name}</td>
<td>${stu.age}</td>
</tr></c:forEach>
</table></div>
</body>
</html>
- ライト制御モジュール
@ResponseBody
@RequestMapping("/youhua")
public void youhua(HttpSession session){
List<Student> list=new ArrayList<>();
Student stu1=new Student("张三",22);
Student stu2=new Student("李四",21);
Student stu3=new Student("王五",20);
Student stu4=new Student("赵六",25);
list.add(stu1);
list.add(stu2);
list.add(stu3);
list.add(stu4);
System.out.println(list);
session.setAttribute("list",list);
return;
}
- ファイル名を指定して実行ショット
