如何通过 Ajax 从 Servlet 获取列表到 JSP

Question

I have a piece of code in a servlet

    response.setContentType("application/json");
    new Gson().toJson(list, response.getWriter());

I have a code in ajax

$.ajax({
        url: '${pageContext.request.contextPath}/Sort',
        type: 'POST',
        dataType: "json",
        data: {
            value : value,
            name : name,
            lowestPrice : lowestPrice,
            highPrice: highPrice
        },
        success: function (response) {
            
        },
        error: function () {
        }
    });

I have a code in jsp

<c:forEach var="x" items="${allProduct}">
                <div class="hover-all-product">
                    <a class="all-product-item" href="${pageContext.request.contextPath}/Product?id=${x.maLapTop}">
                        <div class="status-sale">-11%</div>
                        <div class="img-all-product-item"
                             style="background-image: url('${root}${x.linkHinh1}')">
                        </div>
                        <div class="status">HẾT HÀNG</div>
                        <div class="infor-all-product-item">
                                ${x.tenLaptop}
                        </div>
                        <div class="price-all-product-item">
                                ${x.giaBan}
                        </div>
                        <div class="sale-all-product-item">
                            <span class="origin-price">33.999.000đ</span> <span>11%</span>
                        </div>
                    </a>
                </div>
            </c:forEach>

How can I assign the value of list in servlet to allProduct in jsp through ajax

Answer 1

Think of when which piece of code will run.

1. There is the browser's request for the JSP. The JSP will create the HTML page which the browser will try to render, and inside that HTML page the browser will execute JavaScript.
2. JavaScript running in the browser will trigger the AJAX request, which goes back to the server to fetch data.
3. The AJAX request to fetch data will trigger the servlet on the server side to lookup and deliver the requested data
4. It is the JavaScript in the browser, which - after AJAX has finished - needs to merge the obtained result into the (dynamic) HTML in the browser.

So have a closer look at your JavaScript code to tackle the problem.