从ui前端发送发布请求时，发布请求消息未在应用中显示

debugcn 发表于 Dev

露丝·南·狄宾

我正在构建一个聊天应用程序，该应用程序显示名称和要使用node.js，express.js，socket.io和mongodb发送的消息

但是在Node.js，express，js部分（socket.io和mongodb到目前为止尚未使用）期间出现了以下问题。问题是代码应该已经在下面显示了用户和消息，但就我而言，它只是一个空白

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: "Dibin",message:"HELLO"},

    {name: "Subin",message:"Hi"}
]

 

app.get('/messages',(req,res)=>{

res.send(messages)

})

app.post('/messages',(req,res)=>{

    messages.push(req.body)

    res.sendStatus(200)
})


var server=app.listen(3010, () => {

console.log("Server is listening on port",server.address().port )

})`
`

INDEX.HTML文件

<!DOCTYPE html>
<html>
    <head> 
        
        <link rel="stylesheet" 
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
        integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" 
        crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" 
         integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" 
         crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
         integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" 
         crossorigin="anonymous"></script>

    </head>   

    <body>

        <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()}
            postMessage(message)

         })
        getMessages()
        })

         function addMessages(message){
          
            $("#messages").append(`<h4> ${message.name} </h4> <p> ${message.message}</p>`)


         }

         function getMessages(){

            $.get("http://localhost:3010/messages",data=>{

                console.log(data)
            })
         }


         function postMessage(message) {

            $.post('http://localhost:3010/messages', message )

           }

     </script>

    </body>   

</html>

马马德

尝试 extended: true

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

根据官方文件：

bodyParser.urlencoded（[options]）返回仅解析urlencoded主体并且仅查看Content-Type标头与type选项匹配的请求的中间件。该解析器仅接受主体的UTF-8编码，并支持gzip和deflate编码的自动填充。在中间件（即req.body）之后，在请求对象上填充一个包含已解析数据的新主体对象。该对象将包含键值对，其中值可以是字符串或数组（当extended为false时）或任何类型（当extended为true时）。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。