主页 / 问题 / 1229271
Accepted
Александр
Asked:2022-01-10 14:55:12 +0000 UTC2022-01-10 14:55:12 +0000 UTC

在服务器上获取客户端数据

  • 772

有一个 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请求。他成功地说他能够到达所需的页面（状态 = 200），但没有返回任何内容，也没有打印到控制台。

那么如何值得更改此代码以便通过请求发送整个参数集（我认为将其作为字典进行，但我不确定它是否正确），最重要的是，如何获取数据在 SQL 查询形成页面上？

PS：目前如果我将输出放在服务器上的控制台中

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

返回undefined。

javascript

1 个回答

  1. Best Answer

    在服务器上

    • 必须连接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/bootstrap@4.5.3/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>

    • 2

相关问题