將表單listview切換到gridView Servlet Jsp Ajax

Question

我想在jsp頁面上將listview更改為gridview。 我為每個標簽使用。 以下是我要切換的內容的提取路徑，以及單擊以切換顯示的兩個鏈接。 我有網格視圖內容

        <c:forEach items="${itemList}" var="item">
          <div class="col-md-6">
            <div id="item_row_cotainer">
                <div class="row">
                    <div class="col-md-5 col-xs-6">
                        <div class="image-list">
                            <a href="<c:url value="/checkItem?item_code=${item.item_code}"/>"><img src="<c:url value="/getItemImage?item_code=${item.item_code}"/>" alt="${item.item_name}" /></a>
                        </div>
                    </div>
                    <div class="col-md-7 col-xs-6">
                                <div class="item_title">
                                    <h4><a href="check_item.jsp">${item.item_name}</a></h4>
                                    <p>${item.summary}</p>   
                                    <h1>$US ${item.price}</h1>
                                </div>
                        <div id="left_align">
                            <a href="success_add_cart.jsp" class="btn btn-success btn-md" role="button">
                                <span class="glyphicon glyphicon-shopping-cart"></span>  Add to cart
                            </a>   
                        </div>      
                    </div>    
                </div> 
            </div>  
        </div> <!--end--item-->             
        </c:forEach>

和列表視圖

                <c:forEach items="${itemList}" var="item">

                <div id="item_row_cotainer" class="col-md-12">
                <div class="row">
                   <!-- grid col-md-5 col-xs-6 -->
                    <div class="col-md-2 col-xs-6">
                        <div class="image-list">
                            <a href="<c:url value="/checkItem?item_code=${item.item_code}"/>"><img src="<c:url value="/getItemImage?item_code=${item.item_code}"/>" alt="${item.item_name}" /></a>
                        </div>
                    </div>
                   <!--  grid col-md-7 col-xs-6 -->
                    <div class="col-md-10 col-xs-6">
                        <!-- grid remove -->
                        <div class="row">
                        <!-- grid remove -->
                            <div class="col-md-8">
                                <div class="item_title">
                                    <h4><a href="check_item.jsp">${item.item_name}</a></h4>
                                    <p>${item.summary}</p>   
                                    <h1>$US ${item.price}</h1>
                                </div>
                            </div>  
                             <div class="col-md-4">
                                <div class="add_cart">
                                    <a href="success_add_cart.jsp" class="btn btn-success btn-md" role="button">
                                        <span class="glyphicon glyphicon-shopping-cart"></span>  Add to cart
                                    </a>   
                                </div>
                            </div>
                        </div>
                    </div>

                </div>   
            </div><!--end item-->

        </c:forEach> 

這是開關

            <div class="view-style">
                <a href="<c:url value="/ShowMenuItem?category_code=${category_code}&amp;category_name=${category_name}&amp;view=grid"/>"><span class="glyphicon glyphicon-th"></span></a>
                <a href="<c:url value="/ShowMenuItem?category_code=${category_code}&amp;category_name=${category_name}"/>" ><span class="glyphicon glyphicon-th-list"></span></a> 
            </div>

我想知道如何在不刷新頁面的情況下動態更改這兩個內容。 實際上，我在兩個不同的jsp文件中使用了它。 那么ajax可以幫上忙嗎？ 你能幫助我嗎？

Answer 1

是的你可以。 您可以使用jquery，執行$.get或$.post 。 在收到的內容上，設置div的內部html。 它將如下所示。

 $(document).ready(function(){ $("#p1").click(function(){ $.post("/ShowMenuItem?category_code=${category_code}&category_name=${category_name}&view=grid", function(data){ $("#content").html(data); }); }); $("#p2").click(function(){ $.post("/ShowMenuItem?category_code=${category_code}&category_name=${category_name}, function(data){ $("#content").html(data); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="p1">Page 1</div> <div id="p2">Page 2</div> <div id="content"> Content Here </div>