家居网购项目实现012
以下皆为部分代码,详见 https://github.com/liyuelian/furniture_mall.git
29.功能27-Ajax检验注册名
29.1需求分析/图解
用户注册时,后端通过验证,提示用户当前输入的用户名是否可用。
29.2思路分析
![](https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/ajax%E6%8F%90%E7%A4%BA%E6%B3%A8%E5%86%8C%E4%BC%9A%E5%91%98%E5%90%8D%E6%98%AF%E5%90%A6%E5%AD%98%E5%9C%A8.png)
29.3代码实现
dao层和service层的方法在之前已经实现过了,这里不必再写
29.3.1web层
MemberServlet添加方法isExistUserName,该方法返回json格式的数据给前端
/**
* 校验某个用户名是否已经存在数据库中
*
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
protected void isExistUserName(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//1.获取用户名
String username = req.getParameter("username");
//2.调用service
boolean isExistUsername = memberService.isExistsUsername(username);
//3.返回json格式[按照前端的需求]
//{"isExist":false}
//先使用最简单的拼接,一会使用可拓展的方式
//String resultJson = "{\"isExist\":" + isExistUsername + "}";
//=>将要返回的数据返回map=>json
//使用map可以方便拓展
HashMap<String, Object> resultMap = new HashMap<>();
resultMap.put("isExist", isExistUsername);
String resultJson = new Gson().toJson(resultMap);
//4.返回json
resp.getWriter().write(resultJson);
}
29.3.2前端
login.jsp使用Ajax局部请求刷新
//给注册模块的用户名输入框绑定一个失去焦点事件
$("#username").blur(function () {
//获取输入的用户名
var username = this.value;
//发出ajax请求(使用jquery的$.getJSON())
//jQuery.getJSON(url,data,success(data,status,xhr))
$.getJSON(
"memberServlet",
//使用json格式发送数据
{
"action": "isExistUserName",
"username": username,
},
function (data) {
if (data.isExist) {
$("span.errorMsg").text("用户名已经存在,不能使用");
} else {
$("span.errorMsg").text("用户名可用");
}
})
})
29.4完成测试
![](https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/%E5%AE%B6%E5%B1%85%E9%A1%B9%E7%9B%AE%E4%B9%8Bajax%E9%AA%8C%E8%AF%81%E7%94%A8%E6%88%B7%E6%B3%A8%E5%86%8C%E5%90%8D.gif)
30.功能28-Ajax添加购物车
30.1需求分析/图解
当前每次添加家居到购物车方式,每次都需要sendRedirect(),会刷新整个页面,数据传输开销大
![image-20230101183217743](https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20230101183217743.png)
实际上添加家居到购物车,整个页面只需要刷新购物车的数量
因此使用ajax进行优化,只要刷新购物车的数量即可
30.2思路分析
![](https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/%E6%B7%BB%E5%8A%A0%E5%AE%B6%E5%B1%85%E5%88%B0%E8%B4%AD%E7%89%A9%E8%BD%A6-Ajax.png)
30.3代码实现
30.3.1web层
CartServlet:
/**
* 添加家居数据到购物车-Ajax方式
*
* @param req
* @param resp
* @throws ServletException
* @throws IOException
*/
protected void addItemByAjax(HttpServletRequest req, HttpServletResponse resp) throws IOException {
//得到添加的家居ID
int id = DataUtils.parseInt(req.getParameter("id"), 0);
//获取到id对应的Furn对象
Furn furn = furnService.queryFurnById(id);
if (furn == null || furn.getStock() == 0) {//如果没有对应的家居信息或者该家居库存为0
return;//结束业务
}
//根据furn构建CartItem
CartItem item =
new CartItem(furn.getId(), furn.getName(), furn.getPrice(), 1, furn.getPrice());
//从session获取cart对象
Cart cart = (Cart) req.getSession().getAttribute("cart");
if (null == cart) {//如果当前的session没有cart对象
//创建一个cart对象
cart = new Cart();
//将其放入到session中
req.getSession().setAttribute("cart", cart);
}
//将cartItem加入到cart对象
cart.addItem(item);
//添加完毕后,将当前购物车的商品数量以json形式的数据返回
//前端得到json后进行局部刷新即可
//1.规定json格式{"cartTotalcount,3"}
Map<String, Object> resultMap = new HashMap<>();
//2.创建map
resultMap.put("cartTotalcount", cart.getTotalCount());
//3.转为json
String resultJson = new Gson().toJson(resultMap);
resp.getWriter().write(resultJson);
}
30.3.2前端
customer/index.jsp
//给add to cart绑定事件
$("button.add-to-cart").click(function () {
//获取到点击的furn-id
var furnId = $(this).attr("furnId");
//发出一个请求-添加家居=>后面改成ajax
//location.href = "cartServlet?action=addItem&id=" + furnId;
//改为ajax请求,得到数据进行局部刷新,解决刷新这个页面的效率低的问题
//jQuery.getJSON(url,data,success(data,status,xhr))
$.getJSON(
"cartServlet",
{
"action": "addItemByAjax",
"id": furnId
},
function (data) {
//刷新局部 <span class="header-action-num">
$("span.header-action-num").text(data.cartTotalCount)
}
)
})
30.3.3解决ajax请求转发失效的问题
测试上面的代码,会发现针对ajax的重定向和请求转发失效了,AuthFilter.java的权限拦截没有用了,即我们点击add to cart,后台服务没有响应,怎么办?
使用ajax向后台发送请求跳转页面无效的原因:
- 主要是服务器得到的是ajax发送过来的request,这个请求不是浏览器发送的请求,而是ajax请求的。因此servlet对request进行请求转发或者重定向都不能影响浏览器的跳转
- 这时就出现了请求转发和重定向失效的问题
- 解决方案:如果想要实现跳转,可以返回url,在浏览器执行window.location(url)
![image-20230101201434997](https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20230101201434997.png)
![image-20230101201609766](https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20230101201609766.png)
utils包WebUtils:
package com.li.furns.utils;
import javax.servlet.http.HttpServletRequest;
/**
* @author 李
* @version 1.0
*/
public class WebUtils {
/**
* 判断一个请求是否是ajax请求
*
* @param request
* @return
*/
public static boolean isAjaxRequest(HttpServletRequest request) {
return "XMLHttpRequest".equals(request.getHeader("X-Requested-With"));
}
}
AuthFilter:
package com.li.furns.filter;
import com.google.gson.Gson;
import com.li.furns.entity.Member;
import com.li.furns.utils.WebUtils;
import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import java.io.IOException;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
/**
* 这是用于权限验证的过滤器,对指定的url进行验证
* 如果登录过,就放行;如果没有登录,就返回登录页面
*
* @author 李
* @version 1.0
*/
public class AuthFilter implements Filter {
//后面我们把要排除的url放入到excludedUrls中
private List<String> excludedUrls;
public void init(FilterConfig config) throws ServletException {
//获取到配置的excludedUrls
String strExcludedUrls = config.getInitParameter("excludedUrls");
//进行分割
String[] splitUrl = strExcludedUrls.split(",");
//将splitUrl转成List,赋给excludedUrls
excludedUrls = Arrays.asList(splitUrl);
System.out.println("excludedUrls=>" + excludedUrls);
}
public void destroy() {
}
@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {
//权限验证
HttpServletRequest req = (HttpServletRequest) request;
//得到请求的url
String url = req.getServletPath();
//判断是否要验证
if (!excludedUrls.contains(url)) {//如果url不在配置的规则中,就进行校验
//得到session中的member对象
Member member = (Member) req.getSession().getAttribute("member");
if (member == null) {//说明用户没有登录过
//先判断该请求是否为Ajax请求
if (!WebUtils.isAjaxRequest(req)) {//不是ajax请求
//转发到登录页面
//不要使用重定向,因为重定向的url符合过滤器规则时也会被拦截,
//如果设置不合理就会出现 请求无线循环重定向的 情况
req.getRequestDispatcher("/views/member/login.jsp").forward(request, response);
} else {//如果是ajax请求
//以json格式返回一个url
HashMap<String, Object> resultMap = new HashMap<>();
resultMap.put("url", "views/member/login.jsp");
String resultJson = new Gson().toJson(resultMap);
response.getWriter().write(resultJson);
}
return;//返回
}
}
//否则就放行
chain.doFilter(request, response);
}
}
修改前端接口customer/index.jsp
//给add to cart绑定事件
$("button.add-to-cart").click(function () {
//获取到点击的furn-id
var furnId = $(this).attr("furnId");
//发出一个请求-添加家居=>后面改成ajax
//location.href = "cartServlet?action=addItem&id=" + furnId;
//改为ajax请求,得到数据进行局部刷新,解决刷新这个页面的效率低的问题
//jQuery.getJSON(url,data,success(data,status,xhr))
$.getJSON(
"cartServlet",
{
"action": "addItemByAjax",
"id": furnId
},
function (data) {
if (data.url == undefined) {
//说明没有返回url,过滤器没有让跳转到登录页面,即说明已经登录过了
$("span.header-action-num").text(data.cartTotalCount);
} else {
//否则说明当前服务器返回了url,要求定位
location.href = data.url;
}
}
)
})
30.4完成测试
没有登录的情况下,点击add to cart,页面成功跳转到login.jsp
![](https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/ajax%E6%B7%BB%E5%8A%A0%E8%B4%AD%E7%89%A9%E8%BD%A6%E4%B9%8B%E8%B7%B3%E8%BD%AC%E5%88%B0%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2.gif)
登录后,点击添加购物车,成功添加
31.功能29-上传/更新家居图片
31.1需求分析/图解
![image-20230101210445718](https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/image-20230101210445718.png)
- 后台修改家居,可以点击图片,选择新的图片
- 这里会使用到文件上传功能
31.2思路分析
![](https://liyuelian.oss-cn-shenzhen.aliyuncs.com/imgs/%E5%90%8E%E5%8F%B0%E7%AE%A1%E7%90%86%20%E4%B8%8A%E4%BC%A0%E6%9B%B4%E6%96%B0%E5%AE%B6%E5%B1%85%E5%9B%BE%E7%89%87.png)