Es können keine Daten von Axios an den Knotenserver gesendet werden, der ein leeres Objekt zurückgibt-Fragen und Antworten zum chinesischen PHP-Netzwerk

Mein Kundencode:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="form.css" />
  </head>
  <body>
    <form action="/login" method="post" class="form">
      <input type="text" name="txt" class="txt" id="txt" placeholder="name" />
      <input type="submit" class="submit" id="submit" />
    </form>
    <script defer src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
      let submit = document.querySelector(".submit");
      const form = document.querySelector(".form");

      form.addEventListener("submit", (e) => {
        e.preventDefault();

        const formData = new FormData(form);

        const formObject = {};
        formData.forEach((value, key) => {
          formObject[key] = value;
        });

        console.log(axios.defaults)

        axios
          .post("http://localhost:8080/login", formObject)
          .then(function (response) {
            console.log(response.data);
          })
          .catch(function (error) {
            console.log(error);
          });
      });
    </script>
  </body>
</html>

Mein serverseitiger Code:

const app = express();
const path = require("path");

app.use(express.static('./public',{index:'form.html'}));

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

    app.post('/login',(req,res)=>{
    //const txt = req.body;
      console.log('logged data: ',req.body);
      res.send('Thanks');
    })
app.listen(8080, () => {
  console.log('server is running...in port 8080')

 });

Bitte bedenken Sie zunächst, dass ich neu im Backend bin. Wenn ich versuche, die protokollierten Daten in console.log zu protokollieren, wird ein leeres Objekt zurückgegeben. Ich kann nicht verstehen, warum mein req.body ein leeres Objekt zurückgibt, aber wenn ich versuche, dasselbe zu tun, indem ich action:"/login" und das gebe Methode Wenn: „post“ innerhalb des Formular-Tags funktioniert es wie erwartet und gibt mir die von mir bereitgestellten Eingaben. Bitte hilft mir jemand, mein Kopf brennt, vielen Dank im Voraus.

Antworte allen(1)

P粉3331862852024-04-01 09:14:42 1 Etage

req.body 是空的，因为当您使用 axios 发送它时，您实际上发送的是 JSON (application/json) 负载，并且后端没有 JSON 负载解析器，只有 URL 编码，而HTML 表单以 application/x-www-form-urlencoded 格式发送它，这就是它起作用的原因。

因此，您需要使用 axios 发送 URL 编码的请求，您可以使用 URLSearchParams 将 JSON 对象转换为查询字符串。试试这个。

axios
  .post("http://localhost:8080/login", new URLSearchParams(formObject))

或者，只需在后端添加一个 JSON 解析器，您的原始 JSON 请求就可以工作，使用内置解析器：

app.use(express.json());

Wie +0

Antwort hinzufügen

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial