Получение данных клиента на сервере

Question

Есть некий файл index.html в котором нет ничего особенного, но к нему подключен файл homePageHadnler.js.
В файле расположены несколько функций проверки ввода данных и когда все проверки будут успешно пройдены, должен быть вызван метод из другого файла содержащего функцию формирования SQL запроса.

Код homePageHadnler.js:

function handlerReg() {
    const login = document.forms.reg.login
    const password = document.forms.reg.password

    const args = [login, password]

    //..

    checkErrors(args)
}

async function checkErrors(args) {
    const errors = document.forms.reg.querySelectorAll('.error')

    if (errors.length === 0) {
        let response = await fetch('./database/sqlBilder', {
        method: 'POST',
        body: 'name=Vasya'
        })

        if (response.ok) {
            alert("Запрос выполнен: " + response.status);
        } else {
            alert("Ошибка HTTP: " + response.status);
        }
    }
}

Код подключаемого файла:

const pool = require('./database/pool')

function query (code, table, args){
    if (code === 1){
        let query = `INSERT INTO ${table} VALUES (${args})`
        console.log(query)
        return query
    }
}

По советам из комментариев, написал ajax-запрос. Он успешно говорит о том, что смог достучаться до нужной страницы (status = 200), но ничего не возвращает и не печатает в консоли.

Как тогда стоит изменить данный код, чтобы через запрос отправлялся весь набор аргументов (думаю сделать это как словарь, но не уверен, что так будет правильно) и самое главное, как получать данные на странице формирования SQL запроса?

PS: На данный момент если я ставлю вывод в консоле на сервере

console.log('Строка аргументов: ' + request.body)

возвращается undefined.

Answer 1

На сервере

должен быть подключен body-parser
должен быть прописан соответствующий обработчик (в примере - app.post('/', ...))


const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.set('view engine', 'ejs');
app.set('views', path.join(process.cwd(), 'views'));


app.get('/', (req, res) => {
  res.render('index', {});
});

app.post('/', (req, res) => {
  res.json({
    query: req.query,
    body: req.body
  });
});


const port = 3000;
const hostname = 'localhost';
app.listen(port, hostname, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

Отправка данных с клиента submitFetch:

    <script type="text/javascript">
      function getFormData() {
        const formEl = document.getElementById('exampleForm');
        const formData = new FormData(formEl);
        return formData;
      }

      function getFormDataJSON() {
        const formData = getFormData();
        const plainFormData = Object.fromEntries(formData.entries());
        const formDataJsonString = JSON.stringify(plainFormData);
        return formDataJsonString;
      }

      async function submitFetch(ev) {
        const btn = ev.target;

        ev.preventDefault();
        btn.setAttribute('disabled', true);
        
        let json;
        try {
          const formData = getFormDataJSON();
          const response = await fetch(
            '/',
            {
              method: 'POST',
              body: formData,
              headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
              }
            }
          );

          if (!response.ok) {
            throw Error(response.statusText || 'Something wrong');
          }

          json = await response.json();
        } catch (err) {
          console.error(err);
        }

        btn.removeAttribute('disabled');

        document.getElementById('exampleConsole').innerText = JSON.stringify(json, null, 2);
      }
    </script>

Структура проекта:

Запуск npm run start

package.json

{
  "name": "http-server-for-static",
  "version": "0.0.1",
  "main": "src/index.js",
  "license": "MIT",
  "scripts": {
    "start": "nodemon --watch src ./src/index.js"
  },
  "dependencies": {
    "body-parser": "^1.19.0",
    "ejs": "^3.1.5",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "@types/body-parser": "^1.19.0",
    "@types/ejs": "^3.0.5",
    "@types/express": "^4.17.9",
    "@types/node": "^14.14.20",
    "nodemon": "^2.0.7"
  },
  "engines": {
    "node": ">=12.0.0"
  }
}

src/index.js

const path = require('path');
const express = require('express');
const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.set('view engine', 'ejs');
app.set('views', path.join(process.cwd(), 'views'));


app.get('/', (req, res) => {
  res.render('index', {});
});

app.post('/', (req, res) => {
  res.json({
    query: req.query,
    body: req.body
  });
});


const port = 3000;
const hostname = 'localhost';
app.listen(port, hostname, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

views/index.ejs

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Example Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <style type="text/css">
      html, body {
        height: 100%;
      }
    </style>

    <script type="text/javascript">
      function getFormData() {
        const formEl = document.getElementById('exampleForm');
        const formData = new FormData(formEl);
        return formData;
      }

      function getFormDataJSON() {
        const formData = getFormData();
        const plainFormData = Object.fromEntries(formData.entries());
        const formDataJsonString = JSON.stringify(plainFormData);
        return formDataJsonString;
      }

      async function submitFetch(ev) {
        const btn = ev.target;

        ev.preventDefault();
        btn.setAttribute('disabled', true);
        
        let json;
        try {
          const formData = getFormDataJSON();
          const response = await fetch(
            window.location.href || '/',
            {
              method: 'POST',
              body: formData,
              headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json'
              }
            }
          );

          if (!response.ok) {
            throw Error(response.statusText || 'Something wrong');
          }

          json = await response.json();
        } catch (err) {
          console.error(err);
        }

        btn.removeAttribute('disabled');

        document.getElementById('exampleConsole').innerText = JSON.stringify(json, null, 2);
      }
    </script>
  </head>
  <body>
    <div class="h-100">
      <div class="container h-100">
        <div class="d-flex align-items-center justify-content-center h-100">
          <div class="d-flex flex-column">
            <div class="text align-self-center p-2">

              <form method="post" enctype="multipart/form-data" id="exampleForm">
                <div class="mb-3">
                  <label for="exampleAccount" class="form-label">Account</label>
                  <input type="text" name="account" class="form-control" id="exampleAccount">
                </div>
                <div class="mb-3">
                  <label for="examplePassword" class="form-label">Password</label>
                  <input type="password" name="password" class="form-control" id="examplePassword">
                </div>
                <button type="button" class="btn btn-outline-primary" onclick="submitFetch(event)">Submit</button>
              </form>

            </div>
          </div>
          <div class="d-flex flex-column">
            <div class="text align-self-center p-2">
              <pre style="font-size: 10px" class="mt-3" id="exampleConsole"></pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

БЛОГ НА HUSL

Получение данных клиента на сервере

Ответы (1 шт):