Jpetstore——使用AJAX和jQuery改善用户体验4（商品展示模块）

àì夳堔傛蜴生んèń 2021-11-09 10:34 265阅读 0赞

## Jpetstore——使用AJAX和jQuery改善用户体验4（商品展示模块） ##

CSDN下载：[基于MVC用JSP/Servlet实现JPetStore——使用AJAX和jQuery改善用户体验][MVC_JSP_Servlet_JPetStore_AJAX_jQuery]

--------------------

1.  商品展示模块。在首页展示商品的图片上添加AJAX效果，即当鼠标移到某个商品图片上时，用悬浮窗展示该类型商品的信息，鼠标移开时悬浮窗隐藏。

--------------------

**效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 2]  
**实现方法：**  
  商品展示模块的悬浮窗效果就是对jsp中的一个元素当鼠标移动到上时进行显示操作，鼠标移开后进行隐藏操作，同时利用AJAX异步通信显示对应的信息。  
  首先，在jsp页面进行id、HTML绑定设置，接下来在js中先获取对应categoryId，再通过servlet获取该商品类别对应的产品ID和name作为对应的显示信息，将该信息作为字符串传输回到js中，js中就进行相应显示隐藏操作。

**核心源代码：**  
jsp：

<div id="inform" style="display: none"></div>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/mouseEvent.js"></script>
    
    <area alt="BIRDS" coords="72,2,280,250" href="viewCategory?categoryId=BIRDS" shape="rect" onmouseover="showInform(alt);" onmouseout="hiddenInform(event)"/>
    ……

js：

var xmlHttpRequest;
    function createXMLHttpRequest(){ 
      ……
    }
    function showInform(categoryId) { 
        console.log(categoryId);
        sendRequest("categoryShowJsServlet?categoryId=" + categoryId);
    }
    function sendRequest(url) { 
        ……
    }
    function processResponse() { 
        if (xmlHttpRequest.readyState == 4) { 
            if (xmlHttpRequest.status == 200) { 
                var resp = xmlHttpRequest.responseText;
                //显示悬浮层
                var inform = document.getElementById("inform");
                inform.innerText = resp;
                inform.style.display = "block";
            }
        }
    }
    
    //隐藏悬浮层
    function hiddenInform(event){ 
        var informDiv = document.getElementById('inform');
        var x=event.clientX;
        var y=event.clientY;
        var divx1 = informDiv.offsetLeft;
        var divy1 = informDiv.offsetTop;
        var divx2 = informDiv.offsetLeft + informDiv.offsetWidth;
        var divy2 = informDiv.offsetTop + informDiv.offsetHeight;
        if( x < divx1 || x > divx2 || y < divy1 || y > divy2){ 
            document.getElementById('inform').style.display='none';
        }
    }

servlet：

String categoryId = request.getParameter("categoryId");
    System.out.println(categoryId+" ddddddddd");
    CatalogService catalogService = new CatalogService();
    List<Product> productList = catalogService.getProductListByCategory(categoryId);
    String resp = "Product ID Name\n";
    int i = 0;
    while(i < productList.size()){ 
        Product product = productList.get(i);
        resp += product.getProductId() + " " + product.getName() + "\n";
        i++;
    }
    
    response.setContentType("text/xml");
    PrintWriter out = response.getWriter();
    out.write(resp);

--------------------

完整项目文档及源码请参考：[实验二 使用AJAX和jQuery改善用户体验][_AJAX_jQuery]

--------------------

[MVC_JSP_Servlet_JPetStore_AJAX_jQuery]: https://download.csdn.net/download/qq_39564555/11465162
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70]: /images/20211109/6d58f55c5d224ad09ac721aa6988881e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 1]: /images/20211109/e837d80db5334b05ac1bf41f575230d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTY0NTU1_size_16_color_FFFFFF_t_70 2]: /images/20211109/224e487afc7a4acc9f76b6c8530a4524.png
[_AJAX_jQuery]: https://github.com/zz2summer/JavaWeb-Application-Developing-Technology/tree/master/%E5%AE%9E%E9%AA%8C%E7%9B%B8%E5%85%B3/%E5%AE%9E%E9%AA%8C%E4%BA%8C%20%20%E4%BD%BF%E7%94%A8AJAX%E5%92%8CjQuery%E6%94%B9%E5%96%84%E7%94%A8%E6%88%B7%E4%BD%93%E9%AA%8C