在 Express.js 的 Post 的 req.body 中获得空响应

Question

这是我的两个附件。我收到来自 req.body 的空响应，

1. 我的 index.html 文件是

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"  crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"></script>

<div class="container">
  <br>
  <div class="jumbotron">
    <h1 class="display-4">Send Message</h1>
    <br>
    <input id="name" class="form-control" placeholder="name">
    <br>
    <textarea id="message"  class="form-control" placeholder="message"></textarea>
    <br>
    <button id="Send" class="btn btn-success">Send</button>
  </div>
  <div id="messages">

  </div>
</div>
<script>
  $(() => {
    $('#Send').click(()=>{
      var message = {name: $("name").val(), message: $("message").val()}
      postMessages(message)
    })
    getMessages()
  })
  function addMessage(message){
    $("#messages").append(`<h4>${message.name}</h4> <p>${message.message}</p>`)
  }
  function getMessages(){
    $.get('http://localhost:3000/messages',(data)=>{
      data.forEach(addMessage);
    })
  }

  function postMessages(message){
    $.post('http://localhost:3000/messages',message)
  }
</script>

1. 我的 server.js 文件是

var express = require('express')
    var bodyParser = require('body-parser')
    var app = express()
    
    app.use(express.static(__dirname))
    app.use(bodyParser.json())
    app.use(bodyParser.urlencoded({extended: false}))
    
    
    var messages = [
        {name: 'Tim', message: 'Hi'},
        {name: 'Jane', message: 'Hello'}
    ]
    
    app.get('/messages', (req, res) =>{
        res.send(messages)
    })
    
    app.post('/messages', (req, res) =>{
        console.log(req.body)
        messages.push(req.body)
        res.sendStatus(200)
    })
    
    var server = app.listen(3000, () => {
        console.log('server is listening on port', server.address().port)
    })

1. 我的输出

As can be seen i am getting undefined in name and message section after pressing send button

Answer 1

问题在于你的表单处理，具体var message = {name: $("name").val(), message: $("message").val()}应该是var message = {name: $("#name").val(), message: $("#message").val()}

基本上你试图通过标签而不是 id 来获取元素。