加载数据，按什么按钮被按下我的index.html

Question

部分包含3个按钮 - 锚像这样（有一些引导为好）

的Index.html

<a id="category1" href="html/auctionBay.html" class="portfolio-link" > 
 
<a id="category2" href="html/auctionBay.html" class="portfolio-link" > 
 
<a id="category3" href="html/auctionBay.html" class="portfolio-link" >

这些按钮重定向我到包含div的，auctionBay.html auctionBay.html

<div id="result" class="container"></div>

我需要什么，是当我从上面按一个按钮，去auctionBay.html并据此按下了哪个，从相应的表格打印数据（category1-3 ）从我的数据库到'结果'div（重要的是在div中）。 我现在有一个servlet可以使用Ajax调用

 var j = jQuery.noConflict(); 
    function myFunction() { 
     j.ajax({ 
      type : 'GET', 
      url : '../auctionsDisplay', 
      success : function(data) { 
       j("#result").html(data); 
      } 
     }); 
    } 

auction.html负载时静态地做到这一点，但如果我手动指定类别只适用。（古董=例如类别1）

AuctionDisplay。 java的

public class AuctionsDisplay extends HttpServlet { 
private static final long serialVersionUID = 1L; 

protected void doGet(HttpServletRequest request, HttpServletResponse response) 
     throws ServletException, IOException { 
    response.setContentType("text/html;charset=UTF-8"); 
    PrintWriter out = response.getWriter(); 
    String result = ""; 

    try { 
     Connection con = DBConnection.getCon(); 
     String category = "antiques"; 
     String query = "select id, name, price from " + category; 
     PreparedStatement ps = con.prepareStatement(query); 
     ResultSet rs = ps.executeQuery(); 

     int i; 
     result = ""; 
     boolean flag = rs.next(); 
     while (flag) { 
      result += "<div class='container'><div class='row'><h1 id='antiques' class='category'>Antiques</h1></div><div class='row'>"; 
      i = 0; 
      while (i < 4 && flag) { 
       ps = con.prepareStatement("select highestBidder, ends from auctions where itemId=?"); 
       ps.setString(1, rs.getString("id")); 

       ResultSet rs2 = ps.executeQuery(); 
       rs2.next(); 
       String price = rs.getString("price"); 
       if (rs2.getString("highestBidder") != null) 
        price = rs2.getString("highestBidder"); 

       result += "<div class='col-md-3' portfolio-item>"; 
       result += "<div class='w3-container w3-hover-shadow w3-center'>" + "<h2>" + rs.getString("name") 
         + "</h2><div class='w3-card-20' style='width:100%'>" 
         + "<input id='2' type='image' src='../img/portfolio/w3.jpg' data-toggle='modal' " 
         + "data-target='#MoreInfo'style='width:90%;'>" 
         + "<div class='w3-container w3-center responsive'>" 
         + "<p style='padding:5px;'>Highest Bid: " + price + "\u20ac <br> " + "Ends at: " 
         + rs2.getString("ends") + "<p></div></div></div></div>"; 

       flag = rs.next(); 
       i++; 

      } 

      result += "</div></div>"; 
     } 

    } catch (Exception e) { 
     e.printStackTrace(); 
    } 

    out.println(result); 

} 

我明白了jQuery，AJAX，得到-post请求，JavaScript的（没有PHP请），所以我如何能实现我想要什么？这是相当简单，但它让我感到困惑

Answer 1

由于window.LocalStorage，你可以实现你想要的javascript。既然你希望你的数据从一个页面被发送到另一个页面（浏览器加载一个全新的页面，导致最后一页检索到的任何数据丢失），通过javascript你将需要使用localStorage获得理想的结果。

如何？

var j = jQuery.noConflict(); 
function myFunction(category_id) { 
    //use this id to fetch your appropriate data 
    j.ajax({ 
     type : 'GET', 
     url : '../auctionsDisplay', 
     success : function(data) { 
      localStorage.setItem("category_result", data); 
     } 
    }); 
} 

j('.portfolio-link').click(function(){ 
    var category_id = this.id //this will give you the pressed <a>'s ID value 
    myFunction(category_id); 
}) 

//then on document load retrieve the localStorage value you stored. 
$(document).ready(function() { 
    if (localStorage.getItem("category_result") !== null) { 
     //feed the value to the 'results' div 
     j('#result').html(localStorage.getItem("category_result")); 
    } 
} 

让我知道，如果这有助于