作业内容：
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() {// 检验ISBNvar 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 stubresponse.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();//ISBNString bookName = request.getParameter("bookName").trim();//bookNameString writer = request.getParameter("writer").trim();//writerString type = request.getParameter("type").trim();//type//String loan = request.getParameter("loan").trim();//loanString loan = "";if("on".equals(request.getParameter("loan"))) {loan = "是";} else {loan = "否";}String press = request.getParameter("press").trim();//pressString brith = request.getParameter("brith").trim();//brithString edNum = request.getParameter("edNum").trim();//edNumString money = request.getParameter("money").trim();//moneyString 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！！！
