Итак, я создаю веб-приложение для системы управления запасами, использую сервер 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) {