作业内容：
1 建立一个book.html,实现图书入库提交
整体参考效果如下:
数据提交后，以窗口弹出数据结果，如:
2 使用正则表达式验证ISBN为x-x-x格式，图书名不低于2个字符，作者不能为空，单价在【10-100】之间
3 使用ajax技术（原生js的ajax或jquery的ajax都行）。后台接收url为“bookreg“，接收前端所有数据，并拼凑成一个SQL的insert命令操作串。后端处理完数据后，向前端返回一个“新书注册成功”并在前端一个文本标签中输出。
4 说明：整个过程标准化，模块化，尽量通用化。
Word作业中要附上完整的代码，并加以适当注释说明，每一步运行结果要截图保存。
解答过程：
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book.html</title>
<style>
table {
width: 28%;
margin: 0px auto; /* 让表格水平居中 */
border-collapse: collapse;
line-height: 35px;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left; /* 内容居中 */
}
#topic{
text-align: center;
font-size: 35px;
}
#change_web_color{
font-size: 20px;
}
.sub{
margin: 65% 50% ;
}
</style>
<script src="JS/book.js"></script>
<script src="JS/jquery-3.2.1.min.js"></script>
</head>
<body>
<div>
<form action="BookReg" name="bookForm" id="bookForm1" method="post" enctype="application/x-www-form-urlencoded">
<h2 id="topic">图书入库</h2>
<div><button id="change_web_color">改变网页颜色</button></div>
<table>
<tr>
<td>ISBN:</td>
<td><input type="text" name="ISBN" id="ISBN" required> *必填</td>
</tr>
<tr>
<td>图书名：</td>
<td><input type="text" name="bookName" id="bookName" required> *必填</td>
</tr>
<tr>
<td>作者：</td>
<td><input type="text" name="writer" id="writer"></td>
</tr>
<tr>
<td>类别：</td>
<td><select name="type" id="type">
<option value="理工科">理工科</option>
<option value="文科">文科</option>
</select></td>
</tr>
<tr>
<td>是否贷款：</td>
<td><label for=""><input type="radio" name="loan" id="loan_Y">是</label><label for=""><input type="radio" name="loan" id="loan_N">否</label></td>
</tr>
<tr>
<td>出版社：</td>
<td><input type="text" name="press" id="press"></td>
</tr>
<tr>
<td>出版日期：</td>
<td><input type="date" name="brith" id="brith"></td>
</tr>
<tr>
<td>版次：</td>
<td><input type="text" name="edNum" id="edNum"><input type="range" id="range" name="range"></td>
</tr>
<tr>
<td>单价：</td>
<td><input type="text" name="money" id="money">元</td>
</tr>
<tr>
<td>图书介绍：</td>
<td><textarea name="introduction" id="introduction" cols="30" rows="10"></textarea></td>
</tr>
<tr>
<td class="sub" id="submitBtn" onclick="check()"><button>提交</button></td>
<td class="sub"><button>取消</button></td>
</tr>
</table>
</form>
</div>
</body>
</html>JS部分：
function check() {
// 检验ISBN
var isbn = document.getElementById('ISBN').value.trim();
var isbnRegex = /^\d{1}-\d{1}-\d{1}$/;
if (!isbnRegex.test(isbn)) {
alert("ISBN格式不正确，请输入x-x-x格式的ISBN");
document.getElementById('ISBN').value = "";
document.getElementById('ISBN').focus();
return false;
// 如果 ISBN 格式不正确，直接返回，不再执行后续逻辑
}
// 检验图书名字
var bookName = document.getElementById('bookName').value.trim();
if (bookName.length <= 2) {
alert("书名不能小于2个字符，书名输入错误！");
document.getElementById('bookName').value = "";
document.getElementById('bookName').focus();
return false;
}
// 检验作者名
var author = document.getElementById('writer').value.trim();
if (author.length == 0) {
alert("作者名不能为空！请重新输入！");
document.getElementById('writer').value = "";
return false;
}
// 判断单价
var price = parseFloat(document.getElementById('money').value);
if (price <= 10 || price >= 100) {
alert("单价要处于【10-100】之间！");
return false;
}
// 获取表单数据
let formData = {
ISBN: isbn,
bookName: bookName,
// 其他表单数据可以依次添加
writer: author,
type: document.getElementById('type').value,
loan: document.querySelector('input[name="loan"]:checked').value,
press: document.getElementById('press').value,
brith: document.getElementById('brith').value,
edNum: document.getElementById('edNum').value,
money: price,
introducation: document.getElementById('introduction').value
};
// 转换为 JSON 格式
let jsonData = JSON.stringify(formData, null, 2);
// 弹出显示
alert(jsonData);
}
Servlet部分：
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class BookReg
*/
@WebServlet("/BookReg")
public class BookReg extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public BookReg() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/html;Charset=UTF-8");
//表的信息
String ISBN = request.getParameter("ISBN").trim();//ISBN
String bookName = request.getParameter("bookName").trim();//bookName
String writer = request.getParameter("writer").trim();//writer
String type = request.getParameter("type").trim();//type
//String loan = request.getParameter("loan").trim();//loan
String loan = "";
if("on".equals(request.getParameter("loan"))) {
loan = "是";
} else {
loan = "否";
}
String press = request.getParameter("press").trim();//press
String brith = request.getParameter("brith").trim();//brith
String edNum = request.getParameter("edNum").trim();//edNum
String money = request.getParameter("money").trim();//money
String introduction = request.getParameter("introduction").trim();//introduction
//这个Java的servlet里的输出
System.out.println("ISBN:"+ISBN);
System.out.println("BookName:"+bookName);
System.out.println("writer:"+writer);
System.out.println("type:"+type);
System.out.println("loan:"+loan);
System.out.println("press:"+press);
System.out.println("brith:"+brith);
System.out.println("edNum:"+edNum);
System.out.println("money:"+money);
System.out.println("introduction:"+introduction);
String sqlString = "insert xxx";
PrintWriter out0 = response.getWriter();
out0.write("新书注册成功");
System.out.println("好：前后端交互成功：sql语句为：" + sqlString);
out0.flush();
out0.close();
}
}其他的记得看哦哦！
关注我！爱吃鸡爪zi！！！
