Пытаюсь сделать так чтоб при загрузке страницы, таблица которая является ее частью, заполнялась данными из MySQL. Попробывал с помощью JS создавать request на сервер, запрос работает и возвращает нужные данные, но не в переменную в Js файле(как мне это и необходимо), а на главный экран другой страницы. Вопросы: Можно ли избавится от перехода на другую страницу при создании запроса? Можно ли, и если можно то как, вернуть данные не на страницу браузера а в переменную JS-файла, который и создает запрос на сервер. Вот мой код:
function feelGroupTable(){
var form = document.getElementById('groupListTableForm');
var table = document.getElementById( 'groupListTable');
var listOfGroups = form.submit().response();
console.log(listOfGroups);
for(var i=0; i < listOfGroups.length; i++){
addRow(table, i);
}
}
function addRow(table, i) {
var groupRow = document.createElement('tr');
var groupName = document.createElement('td');
groupName.textContent = listOfGroups[i].name;
//groupName.onclick()
groupName.class = 'group-name';
groupName.id = 'groupName' + listOfGroups[i].id;
groupRow.appendChild(groupName);
var deleteCell = document.createElement('td');
var deleteImage = document.createElement('img');
deleteImage.src = '../pictures/delete.png';
deleteCell.appendChild(deleteImage);
groupRow.appendChild(deleteCell);
table.appendChild(groupRow);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Groups</title>
<link rel = "stylesheet" href="../stylesheets/stylesheet-userlist.css">
<link rel="shortcut icon" href = "../pictures/group.png">
<script src="../scripts/goToScript.js"></script>
<script src="../scripts/groupListScript.js"></script>
</head>
<body>
<header>
<table class="header-menu">
<tr>
<td><href onclick="goToUserList()">User list</href></td>
<td><href onclick="goToCreateGroup()">Groups</href></td>
<td><href onclick="goToAddUser()">Add user</href></td>
<td><href onclick="logOut()">Log out</href></td>
</tr>
</table>
</header>
<div class="user-list-block">
<form method="post" action="/addgroup" class="add-group-form" id="userListGroups">
<input type="text" name="gName" id="gNameField" class="group-textfield" maxlength="12" placeholder="Name of new group">
<input type="submit" class="group-button" value="Save">
<hr style="width: 90%; margin-left: 5%">
</form>
<form method="get" action="/getGroups" id="groupListTableForm">
<table id="groupListTable">
<tr>
<th>Name</th>
<th> </th>
</tr>
</table>
</form>
</div>
<script>feelGroupTable()</script>
</body>
</html>
const express = require('express');
const app = express();
app.use(express.static('public'));
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
const mysql = require('mysql');
const mysqlConnection = mysql.createConnection({
host: 'remotemysql.com',
port: '3306',
user: 'daMRUPkHhQ',
password: 'K1aa9ik6OT',
database: 'daMRUPkHhQ'
});
app.listen(8080, function () {
console.log('Server started');
});
app.post('/addgroup', function (req, res) {
var groupName = req.body.gName;
var sql = 'INSERT INTO groupList SET ?';
var postValues = {name : groupName};
mysqlConnection.connect(function (err) {
if(err) console.log('Error connecting to DataBase');
else mysqlConnection.query(sql, postValues, function (err) {
if(err)console.log(err);
else {
res.redirect('html/group-list.html');
res.end();
}
});
});
});
app.get('/getgroups', function(req, res){
var sql = 'SELECT * FROM groupList';
mysqlConnection.connect(function (err) {
if(err) console.log('Error connecting to DataBase');
else mysqlConnection.query(sql, function (err, rows) {
if(err)console.log(err);
else {
res.setHeader('Content-Type', 'application/json');
var groupList = JSON.stringify(rows);
res.json(groupList);
}
});
});
});