のデータのロードは、私の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にあることが重要です）。 私は現在auction.html負荷がAJAX呼び出し

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

を使用しますが、私は手動でカテゴリを指定した場合のみ動作時に静的にこれを行うことができますサーブレットを持っている。（骨董品=例えばカテゴリ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); 

} 

私はアヤックスは、Get-POSTリクエストは、Javascript（無PHPください）、jqueryの理解、ので、どのように私は私が望むものを達成することができますか？それは簡単ですが、それは私を混乱させます

Answer 1

あなたはwindow.LocalStorageのおかげであなたが望むものを達成することができます。 1つのページのデータを別のページ（ブラウザが新しいページを読み込んで最後のページで取得されたデータが失われる）に送る必要があるため、をとすると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")); 
    } 
} 

私に教えてください、これは