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，可以在auction.html使用ajax调用

加载时静态执行此操作

        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，您将需要利用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"));
    }
}

如果有帮助，请告诉我

根据按下的按钮，在新页面上加载数据库中的数据

1 个答案: