🙈作者简介：练习时长两年半的Java up主
🙉个人主页：老茶icon
🙊 ps:点赞👍是免费的，却可以让写博客的作者开兴好久好久😎
📚系列专栏：Java全栈，计算机系列（火速更新中）
💭 格言：种一棵树最好的时间是十年前，其次是现在
🏡动动小手，点个关注不迷路，感谢宝子们一键三连

课程名：Java

内容/作用：知识点/设计/实验/作业/练习

学习：JavaWeb+在线图书商城+Ajax（异步的 JavaScript 和 XML）

续前章内容：在线图书商城

环境与设备

1.软件：IntelliJ IDEA 2022.3.2
2.环境：Windows 11 and JDK 11

内容：

Ajax

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

任何的浏览器都支持ajax。通过原生的js使用ajax极不方便，这里使用jquery封装后的ajax使用。

使用

1.在页面中引入jquery文件

<script src="jquery文件路径"></script>

2.给某个节点绑定事件后使用ajax提交数据

<script>$("#btn").click(()=>{$.ajax({//访问的地址url:'URL地址',//提交的数据，以键值对的形式提交，也可以提交单个数据data:{id:123,op:"xxx"},//提交方式type:"post",//访问成功后的回调函数succuss:(res)=>{//res为访问URL地址后的返回值},//访问失败后的回调函数error:(res)=>{}});});
</script>

登录

dao

public Customer findByPhoneAndPwd(String phone, String password) {String sql = "select * from customer where phone=? and password=?";conn = DBHelper.getConn();try {pst = conn.prepareStatement(sql);pst.setString(1, phone);pst.setString(2, password);rs = pst.executeQuery();while (rs.next()) {int id = rs.getInt(1);String nickName = rs.getString(4);String trueName = rs.getString(5);String address = rs.getString(6);return new Customer(id, phone, password, nickName, trueName, address);}} catch (SQLException e) {System.out.println("登录异常" + e);} finally {DBHelper.release(conn, pst, rs);}return null;
}

service

public Customer login(String phone, String password) {return customerDao.findByPhoneAndPwd(phone, password);
}

servlet

case "login":String phone = req.getParameter("phone");;String password = req.getParameter("password");Customer login = customerService.login(phone, password);if (login != null) {//登录成功后，创建购物车对象,保存到session中Cart cart = new Cart();session.setAttribute("cart", cart);//将登录的用户保存在session中session.setAttribute("customer", login);//跳转到查询首页数据的servlet//resp.sendRedirect("http://localhost:8080/book_shop/book?op=queryByPage&page=1&keyword=");} else {//错误时，给前端反馈的字符串resp.getWriter().print("error");}
break;

页面ajax部分

$("#sub").bind("click",()=>{$.ajax({url:"http://localhost:8080/book_shop/customer",//提交的路径data:{//提交的数据data:{k:v,k:v}   data:xxxop:"login",phone:$(".inp[name=phone]").val(),password:$(".inp[name=password]").val()},type:"post",//提交方式success:(res)=>{if(res=="error"){alert("用户名或密码错误")}else{location.href="http://localhost:8080/book_shop/book?op=queryByPage&page=1&keyword=";}}});
})

注册

dao

/** 检测电话是否存在* */
public int phoneExists(String phone) {//查询该电话出现的次数String sql = "select count(id) from customer where phone=?";conn = DBHelper.getConn();try {pst = conn.prepareStatement(sql);pst.setString(1, phone);rs = pst.executeQuery();//返回查询到的结果if (rs.next()) {return rs.getInt(1);}} catch (SQLException e) {System.out.println("检测电话是否存在" + e);} finally {DBHelper.release(conn, pst, rs);}return 0;
}
/*真正添加
*/
public int insert(Customer customer) {String sql = "insert into customer values(null,?,?,?,?,?)";conn = DBHelper.getConn();try {pst = conn.prepareStatement(sql);pst.setString(1, customer.getPhone());pst.setString(2, customer.getPassword());pst.setString(3, customer.getNickName());pst.setString(4, customer.getTrueName());pst.setString(5, customer.getAddress());return pst.executeUpdate();} catch (SQLException e) {System.out.println("注册异常" + e);} finally {DBHelper.release(conn, pst, rs);}return 0;
}

service

/** 注册业务流程* 根据电话查询是否存在，不存在则添加，存在返回false* */
public boolean register(String phone, String password) {//检测电话是否存在if (customerDao.phoneExists(phone) == 1) {return false;}//真实注册Customer customer = new Customer();customer.setPhone(phone);customer.setPassword(password);customer.setNickName("用户" + phone.substring(7));return customerDao.insert(customer) > 0;
}

servlet

case "register"://注册，注册的电话号码不能重复String regPhone = req.getParameter("phone");;String resPwd = req.getParameter("password");//调用注册if (customerService.register(regPhone, resPwd)) {resp.getWriter().print("注册成功");} else {resp.getWriter().print("该手机号码已注册");}
break;case "checkPhone":String checkPhone = req.getParameter("phone");resp.getWriter().print(customerService.phoneExists(checkPhone));
break;

页面js部分

<script>/*电话文本框内容改变事件*/$("input[name=phone]").change(function () {$.ajax({url: "http://localhost:8080/book_shop/customer",data: {op: "checkPhone",phone: $(this).val()},type: "post",success: (res) => {if (res == "true") {//显示提示文字$("#warning").show();//禁用按钮，修改按钮文件$("#sub").attr("disabled","true");$("#sub").val("请重新输入手机号码");} else {//隐藏提示文字，恢复按钮功能$("#warning").hide();$("#sub").removeAttr("disabled");$("#sub").val("注册");}}});});/*表单提交事件*/document.forms[0].onsubmit = () => {var phone = document.querySelector(".inp[name=phone]").value;var password = document.querySelector(".inp[name=password]").value;//1开头的11位数字var regexPhone = /^1\d{10}$/;//非空格的至少6位密码var regexPwd = /^[^\s]{6,}$/;if (!regexPhone.test(phone)) {alert("电话格式有误");return false;}if (!regexPwd.test(password)) {alert("密码中不能出现空格且至少6位");return false;}}
</script>

退出

servlet

case "logout"://销毁sessionsession.invalidate();//跳转登录页resp.sendRedirect("/book_shop/pages/login.html");
break;

总结

   好好学习，天天向上。

往期专栏
Java全栈开发
数据结构与算法
计算机组成原理
操作系统
数据库系统
物联网控制原理与技术