Как отобразить результаты на новой странице после запуска функции ajax с сервера node.js express? - PullRequest
0 голосов
/ 15 апреля 2020

Итак, я создаю веб-приложение для системы управления запасами, использую сервер node.js express и mysql на локальном хосте. В настоящее время я пытаюсь при нажатии на один из элементов в списке товаров перенаправить меня на другую страницу html, которая отображает всю информацию о предмете, по которому щелкнули.

<script>
    function item_click(click) {

        var data = click.id;

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

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

</script>

Это функция 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 сервер в данный момент. , Консоль регистрирует поступающий номер идентификатора, и запрос выводит правильный результат, единственная проблема заключается в том, что при перенаправлении на 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-адреса, и теперь запрос работает так, как задумано.

(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) {
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...