0

Пытаюсь сделать так чтоб при загрузке страницы, таблица которая является ее частью, заполнялась данными из 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>
        &lt;/table&gt;
    &lt;/form&gt;
&lt;/div&gt;
&lt;script&gt;feelGroupTable()&lt;/script&gt;

</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);
            }
        });
    });
});
user_587
  • 2,571
nojitsi
  • 101
  • Ни дня без дубля – Alexey Ten Aug 04 '19 at 14:05
  • var listOfGroups = form.submit().response(); Так вроде бы submit ничего не возвращает. Что за метод такой, response(), который к undefined применяется? – zekneer Aug 04 '19 at 14:21
  • @AlexeyTen Я не знаю кто ты и где ты живешь, но я найду тебя и обниму. Чувак, 2 дня уже гуглил, ты меня крепко выручил, Спасибо. – nojitsi Aug 04 '19 at 14:45
  • @zekneer Кучу вещей перепробывал, просто уже пальцем в небо стрелял. – nojitsi Aug 04 '19 at 14:46

0 Answers0