javascript - 从 node.js express 服务器运行 ajax 函数后如何在新页面中显示结果？

Question

所以我正在创建一个 Web 应用程序作为库存管理系统，我在本地主机上使用 node.js 快速服务器和 mysql。我目前正在尝试，当我单击库存列表中的一个项目时，它会将我重定向到另一个 html 页面，该页面将显示所单击项目的所有信息。

<script>
    function item_click(click) {

        var data = click.id;

        $.get("/getstockitem?id=" + data, function(data) {

            window.location.href = "stockInfoPage.html";
        });

</script>

这是将项目 ID 号发送到节点服务器的 ajax 函数。

const express = require('express');
const app = express();
const path = require('path');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const http = require('http');
// viewed at http://localhost:8080

app.use(express.static('Website'));


app.listen(8080);

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}));
app.get('/getstockitem', function (req, res) {

    var data = req.query;
    //var data = 1;

    console.log(data);



    var connection = mysql.createConnection({
        host: 'localhost',
        user: 'root',
        password: 'password1',
        database: 'dissertation_database'
    });

    connection.connect(function (err) {
        if (err) {
            return req.next(err);
        }
        var sql = "SELECT * FROM stock where stock_id=" + data.id;
        connection.query(sql, function (err, result) {


            console.log(result);
            connection.end();
            res.json(result);
        });
    });

});

这就是我的 node.js 服务器目前的样子。控制台正在记录通过的 id 号，并且查询正在通过正确的结果，唯一的问题是当它重定向到 stockInfoPage.html 时，似乎结果没有通过。我知道当我在下一页调用它时，它很可能会重做查询，我想知道能够让下一页显示数据的最佳方法是什么？

<script>
        $(document).ready(function() {

            $.ajax({
                type: 'GET',
                url: 'http://localhost:8080/getstockitem',
                dataType: "json",
                success: function(data) {
                    if (data) {
                        for (let i = 0; i < data.length; i++) {

                            console.log(data);


                            $("#itemName").append($('<p class="itemStaticText">Name: </p><p class="itemInfoText">' + data[i].stock_name + '</p>'));
                            $("#itemDescription").append($('<p class="itemStaticText">Description: </p><p class="itemInfoText">' + data[i].stock_description + '</p>'));
                            $("#itemQuantity").append($('<p class="itemStaticText">Quantity: </p><p class="itemInfoText">' + data[i].stock_quantity + '</p>'));
                            $("#itemShelf").append($('<p class="itemStaticText">Shelf Number: </p><p class="itemInfoText">' + data[i].shelf_number + '</p>'));
                            $("#itemRack").append($('<p class="itemStaticText">Rack Letter: </p><p class="itemInfoText">' + data[i].rack_letter + '</p>'));
                            $("#itemPrice").append($('<p class="itemStaticText">Price: </p><p class="itemInfoText">' + data[i].stock_price + '</p>'));

                        }
                    }
                }
            });
        });

    </script>

编辑

因此，由于 terrymorse 的建议，它现在正在进行一些小的更改。下面我将进行更改，以防其他人可能有类似的问题。

<script>
    function item_click(click) {

        var data = click.id;

        window.location.href = "stockInfoPage.html?id=" + data;
    }

</script>

这次将在 url 中传递 ID 号，然后在下一页我添加了这些行以从 url 中提取 id 号，现在查询按预期工作。

(document).ready(function() {

        var url = window.location.href;
        var id = url.substring(url.lastIndexOf('=') + 1);

        $.ajax({
            type: 'GET',
            url: 'http://localhost:8080/getstockitem?id=' + id,
            dataType: "json",
            success: function(data) {

标签： javascriptmysqlnode.jsajaxexpress