下一步,在index.jsp文件中,添加相应请求链接。下一步,在实体类中增加一个数组属性private float[] scores;,用于存放所选课程的成绩。请修改add_student.jsp、StudentController.java以及student_info.jsp等文件,确保可以输入所选课程成绩,并在提交后正确显示。下一步,在pom.xml文件中添加JSON依赖。下一步,在webapp目录中创建js文件夹,将jquery-1.11.3.min.js文件复制到js中。下一步,修改spring-mvc.xml文件,加入mvc相关内容。下一步,在WEB-INF/pages/book目录中,创建book_list.jsp文件,用于显示和添加book信息如书名,出版社,价格。要求<title>为"测试Json",最后,在index.jsp中添加请求链接。
时间: 2023-07-15 20:11:47 浏览: 188
好的,让我来解释一下具体的操作流程:
1. 在index.jsp文件中添加相应请求链接,比如:
```
<a href="add_student.jsp">添加学生信息</a>
<a href="book_list.jsp">查看书籍列表</a>
```
2. 在实体类Student中增加一个数组属性private float[] scores;,用于存放所选课程的成绩。
```
public class Student {
private int id;
private String name;
private float[] scores;
// 省略getter和setter方法
}
```
3. 修改add_student.jsp,添加成绩输入框,并在表单中加入scores属性。
```
<form action="addStudent" method="post">
姓名:<input type="text" name="name"><br>
成绩1:<input type="text" name="scores[0]"><br>
成绩2:<input type="text" name="scores[1]"><br>
成绩3:<input type="text" name="scores[2]"><br>
<input type="submit" value="提交">
</form>
```
4. 修改StudentController.java,将scores属性也加入到Student对象中,并在addStudent方法中获取scores数组。
```
@Controller
public class StudentController {
@RequestMapping("/addStudent")
public ModelAndView addStudent(Student student) {
// 保存学生信息到数据库
// ...
// 跳转到学生信息页面
ModelAndView mav = new ModelAndView("student_info");
mav.addObject("student", student);
return mav;
}
}
```
5. 修改student_info.jsp,将scores数组的值也显示出来。
```
姓名:<%= student.getName() %><br>
成绩1:<%= student.getScores()[0] %><br>
成绩2:<%= student.getScores()[1] %><br>
成绩3:<%= student.getScores()[2] %><br>
```
6. 在pom.xml文件中添加JSON依赖,比如:
```
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.12.3</version>
</dependency>
```
7. 在webapp目录中创建js文件夹,将jquery-1.11.3.min.js文件复制到js中。
8. 修改spring-mvc.xml文件,加入mvc相关内容,比如:
```
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/pages/" />
<property name="suffix" value=".jsp" />
</bean>
<mvc:annotation-driven />
```
9. 在WEB-INF/pages/book目录中,创建book_list.jsp文件,用于显示和添加book信息如书名,出版社,价格。要求<title>为"测试Json"。
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试Json</title>
<script src="../js/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {
// 获取所有书籍信息
$.getJSON("bookList", function(data) {
// 遍历书籍列表,将每本书的信息添加到表格中
$.each(data, function(index, book) {
var tr = $("<tr></tr>");
tr.append("<td>" + book.name + "</td>");
tr.append("<td>" + book.publisher + "</td>");
tr.append("<td>" + book.price + "</td>");
$("#book_table tbody").append(tr);
});
});
// 添加书籍信息
$("#add_book_form").submit(function(event) {
event.preventDefault(); // 阻止表单提交
// 获取表单数据
var name = $("#name").val();
var publisher = $("#publisher").val();
var price = $("#price").val();
// 发送POST请求,将书籍信息保存到数据库
$.post("addBook", {name: name, publisher: publisher, price: price}, function(data) {
if (data.success) {
// 清空表单,并重新获取书籍列表
$("#name").val("");
$("#publisher").val("");
$("#price").val("");
$("#book_table tbody").empty();
$.getJSON("bookList", function(data) {
$.each(data, function(index, book) {
var tr = $("<tr></tr>");
tr.append("<td>" + book.name + "</td>");
tr.append("<td>" + book.publisher + "</td>");
tr.append("<td>" + book.price + "</td>");
$("#book_table tbody").append(tr);
});
});
} else {
alert("添加书籍失败!");
}
});
});
});
</script>
</head>
<body>
<h1>图书列表</h1>
<table id="book_table" border="1">
<thead>
<tr>
<th>书名</th>
<th>出版社</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<!-- 书籍列表将动态生成 -->
</tbody>
</table>
<br>
<h2>添加书籍</h2>
<form id="add_book_form">
书名:<input type="text" id="name"><br>
出版社:<input type="text" id="publisher"><br>
价格:<input type="text" id="price"><br>
<input type="submit" value="添加">
</form>
</body>
</html>
```
10. 在index.jsp中添加请求链接。
```
<a href="add_student.jsp">添加学生信息</a>
<a href="book_list.jsp">查看书籍列表</a>
```
这样就完成了所有的操作。希望能对你有所帮助。
阅读全文