时间戳

首页 > 解决方案 > 如何获取将 servlet 返回到 ajax 的特定字段？

javascript - 如何获取将 servlet 返回到 ajax 的特定字段？

问题描述

我是 ajax 和一般 js 的新手，我有这个问题。我有一个购物车页面，我想增加产品的数量。为此，我使用 ajax。如何获取 servlet 通过 ajax 返回的值？在我的实现中，我得到了完整的页面，我只需要 totalPrice！

阿贾克斯：

window.onload = function(){
document.querySelector("#count").onblur = function(){
        var par = document.getElementsByTagName('div');
        for(i = 0; i < par.length; i ++){
            if(par[i].className == 'name'){
                par = par[i];
                break;
            }
        }
        ajaxGetCartPrice(par.innerHTML);
    }
}

function ajaxGetCartPrice(par){
    var req = new XMLHttpRequest();

    req.onreadystatechange = function(){
        if(req.readyState == 4){
            document.querySelector("#totalPrice").innerHTML = req.responseText; // I need to transfer my totalPrice here which will return the servlet
        }
    }

    req.open('GET', 'addToCart?name=' + par);
    req.send();
}

小服务程序：

@Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        cartService.add(productService.getProductByName(req.getParameter("name")));

        req.getSession().setAttribute("totalPrice", cartService.getCartPrice()); // i need only this in my ajax
        req.getSession().setAttribute("cartItems", cartService.getProductForOrder());
        req.getSession().setAttribute("successAdded", SUCCESS_ADDED_INTO_CART);

        LOG.debug("Total price: " + req.getSession().getAttribute("totalPrice"));
        LOG.debug("Cart items: " + cartService.getProductForOrder());

        req.getRequestDispatcher(PRODUCT_PAGE).forward(req, resp);
    }

我的页面：

<table>
                     <tr>
                        <th>Item</th>
                        <th>Nam e</th>
                        <th>Category</th>
                        <th>Company Manufacturer</th>
                        <th>QTY</th>
                        <th>Prices</th>
                        <th>Total Prices</th>
                     </tr>

                     <c:forEach items="${cartItems}" var="items">
                        <tr>
                        <td><a href="images/product/${items.key.imageName}"><img src="images/product/${items.key.imageName}" width=100></td>
                        <td><div class="name">${items.key.name}</div></td>
                        <td>${items.key.category.name}</td>
                        <td>${items.key.manufacturer.name}</td>
                        <td><input type="text" id="count" value="${items.value}"></td>
                        <td>${items.key.price}</td>
                        <td><span id="totalPriceForOne">${items.key.price * items.value}</span></td>
                        <td><a href="removeItemFromCart?name=${items.key.name}">Remove item</a></td>
                        </tr>
                     </c:forEach>
                </table>

         </div>
             <div align="right" style="color: #0087ff">
                 <span id="totalPrice"><h4>total price: ${totalPrice}</h4></span>
             </div>

               <div align="right"><a href="order.jsp" class="to-buy">Make order</a></div>

标签： javascriptjavaajaxxmlhttprequest

解决方案

您需要分别实现两个 Servlet 代码。一个用于整页，另一个用于 totalPrice。通常，JSON 格式用于响应。

例如，

{totalPrice: 100}

JS：

document.querySelector("#totalPrice").innerHTML = JSON.parse(req.responseText).totalPrice;

推荐阅读