从 ui 前端发送 post req 时，Post Request 消息未显示在 App 中
Posted
技术标签:
【中文标题】从 ui 前端发送 post req 时，Post Request 消息未显示在 App 中【英文标题】：Post Request message Not being displayed in the App when sending post req from ui front end 【发布时间】：2021-06-01 09:45:47 【问题描述】：我正在构建一个聊天应用程序，它显示名称和要发送的消息 使用 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>
【问题讨论】：
【参考方案1】：试试extended: true
app.use(bodyParser.urlencoded(extended:true))
来自官方documentation：
bodyParser.urlencoded([选项]) 返回仅解析 urlencoded 正文并仅查看 Content-Type 标头与 type 选项匹配的请求的中间件。此解析器仅接受正文的 UTF-8 编码，并支持 gzip 和 deflate 编码的自动膨胀。 在中间件（即 req.body）之后的请求对象上填充了一个包含解析数据的新主体对象。该对象将包含键值对，其中值可以是字符串或数组（当扩展为假时）或任何类型（当扩展为真时）。
【讨论】：
以上是关于从 ui 前端发送 post req 时，Post Request 消息未显示在 App 中的主要内容，如果未能解决你的问题，请参考以下文章
如何将一组数据从客户端传递到 axios post 请求的 req.body
即使我使用 API Post 请求发送数据，为啥 req 正文是 [重复]
NodeJS Express - 幕后GET / POST / PATCH / DELETE之间的区别