根据按下的按钮从新页面上的数据库加载数据

Question

我的 index.html 的一部分包含 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 并根据所按下的内容，将数据库中相应表（类别 1-3）中的数据打印到“结果”中' div（在 div 中很重要）。 我目前有一个 servlet，可以在使用 ajax 调用加载 auction.html 时静态地执行此操作

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

但仅在我手动指定类别时才有效。（例如，antiques=category1）

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、get-post 请求、javascript（请不要使用 php），那么我怎样才能实现我想要的呢？这可能很简单，但让我感到困惑

Answer 1

感谢window.LocalStorage，您可以在 javascript 中实现您想要的。由于您希望将一个页面中的数据发送到另一个页面（浏览器加载一个全新的页面，这会导致最后一页检索到的任何数据丢失），因此您需要通过 javascript WILL使用 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"));
    }
}

如果这有帮助，请告诉我