Tidak dapat menghantar data dari axios ke pelayan nod yang mengembalikan objek kosong
P粉141911244
P粉141911244 2024-03-31 11:14:22
0
1
2640

Kod pelanggan saya:

<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>

Kod sisi pelayan saya:

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')

 });

Pertama sekali, sila ingat bahawa saya baru dalam bidang belakang. Apabila saya cuba console.log data yang dilog, ia mengembalikan objek kosong, saya tidak faham mengapa req.body saya mengembalikan objek kosong, tetapi apabila saya cuba melakukan perkara yang sama dengan memberikan tindakan:"/login" dan kaedah Bila: "siarkan" di dalam teg borang ia berfungsi seperti yang diharapkan dan memberi saya input yang saya berikan. Tolong seseorang membantu saya, kepala saya terbakar, terima kasih terlebih dahulu.

P粉141911244
P粉141911244

membalas semua(1)
P粉333186285

req.body 是空的,因为当您使用 axios 发送它时,您实际上发送的是 JSON (application/json) 负载,并且后端没有 JSON 负载解析器,只有 URL 编码,而HTML 表单以 application/x-www-form-urlencoded Hantar dalam format, itulah sebabnya ia berfungsi.

Jadi anda perlu menggunakan axios untuk menghantar permintaan yang dikodkan URL, anda boleh menggunakan URLSearchParams untuk menukar objek JSON kepada rentetan pertanyaan. Cuba ini.

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

Sebagai alternatif, cuma tambahkan penghurai JSON pada hujung belakang anda dan permintaan JSON mentah anda akan berfungsi, menggunakan penghurai terbina dalam:

app.use(express.json());
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan