将表单列表视图切换到 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>