正文 

当前位置： 首页 > 问答 >

从 ui 前端发送 post req 时，Post Request 消息未显示在 App 中

     2023-03-08     125

关键词：

【中文标题】从 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）之后的请求对象上填充了一个包含解析数据的新主体对象。该对象将包含键值对，其中值可以是字符串或数组（当扩展为假时）或任何类型（当扩展为真时）。

【讨论】：

即使我使用 API Post 请求发送数据，为啥 req 正文是 [重复]

】即使我使用APIPost请求发送数据，为啥req正文是[重复]【英文标题】：WhyreqbodyiseventhoughIsendthedatawithAPIPostrequest[duplicate]即使我使用APIPost请求发送数据，为什么req正文是[重复]【发布时间】：2021-10-1100:40:14【问题描述】：我正在创... 查看详情

从 Gatsby JS 制作 Axios post Req

...述】：我正在尝试从我的组件状态中获取数据，然后将其发送到RESTapi。我在onsubmit函数中创建了axiospostreq，但是我知道这在gatsby中不起作用。当我从Gatsby的onSubmit函数发出请求时，我的res.data是“这个应用程序最适 查看详情

如何将一组数据从客户端传递到 axios post 请求的 req.body

...-2918:04:33【问题描述】：我正在尝试使用ajax调用将在我的前端收集的用户数据发送到我在后端设置的axios发布请求。我有一些参数需要发回一组数据。当我在后端console.log 查看详情

从 React 应用程序向 Rocket 后端发送 POST 请求时出错返回失败

...：我正在编写一个简单的web，以Rocket作为后端，React作为前端。登录页面的代码sn-p如下所示#[post("/login",data="<d 查看详情

Django req.POST 总是返回 False

...描述】：我正在测试shipstationwebhook，但我似乎无法从他们发送的POST请求中获取数据。他们的webhookdocs说他们的POST请求将包含如下所示的正文："resource_url":"https://ssapiX.shipstation 查看详情

从 Vue.js 向 Django 发送 POST/DELETE 请求时禁止（未设置 CSRF cookie。）

...】：2021-09-1605:29:11【问题描述】：我一直在尝试从我的Vue前端向我的Django后端发送POST或DELETE请求。我在localhost:3000 查看详情

允许在从 UI 端进行 Post 请求时在 url 中发送特殊字符

】允许在从UI端进行Post请求时在url中发送特殊字符【英文标题】：AllowtosendspecialcharacherintheurlwhiledoingPostrequestfromUIside【发布时间】：2021-09-2919:58:47【问题描述】：我试图发送以下特殊字符(!@#$%^&()++)(&^%$#@!!@#$​​%^&()++)(&a... 查看详情

从 Angular 向 Asp.net 发送 post 请求时出现错误 405

...间】：2019-04-2005:46:12【问题描述】：我正在尝试从Angular前端向ASP.net后端发送发布请求。获取请求工作正常。当我发送时：this.http.post("http://localhost:3000/api/Cards","一 查看详情

从 React 向 Django 发送 post 请求时出现 400（错误请求）

...。当我单击登录按钮时，我从两者都收到错误400(BadRequest)前端和后端。我正在使用simplejwt身份验证。Iha 查看详情

从 STORE 发送 POST 请求

】从STORE发送POST请求【英文标题】：SendingaPOSTrequestfromSTORE【发布时间】：2012-07-0111:28:50【问题描述】：这是我的商店课程。我正在尝试完成POST请求。这是我的代码；一切正常，当我从Firebug检查它时，我也得到了服务器响应。但... 查看详情

如何从我的 NodeJS Web 应用程序的前端 JS 文件中的函数发送 POST 请求？ [复制]

】如何从我的NodeJSWeb应用程序的前端JS文件中的函数发送POST请求？[复制]【英文标题】：HowtosendaPOSTrequestfromafunctioninmyFrontendJSfileinmyNodeJSwebapp?[duplicate]【发布时间】：2020-04-0217:56:04【问题描述】：假设我的NodeJS前端Example.js文件中... 查看详情

Expressjs在POST请求后不发送响应

】Expressjs在POST请求后不发送响应【英文标题】：ExpressjsNotSendingResponseAfterPOSTRequest【发布时间】：2018-09-1613:27:46【问题描述】：我在快递方面有这个功能：//Registeruserloginexports.register_user=function(req,res)varportalID=req.body.portalID;varcompan... 查看详情

从 React 应用程序向 Google Drive API 发送 POST 请求时如何绕过 CORS 错误？

】从React应用程序向GoogleDriveAPI发送POST请求时如何绕过CORS错误？【英文标题】：HowtobypassCORSerrorwhensendingPOSTrequesttoGoogleDriveAPIfromreactapplication?【发布时间】：2019-12-1416:14:06【问题描述】：我是网络开发新手，当我尝试将文件上传... 查看详情

使用 $http.post (angular) 和 bodyparser.text() 发送字符串请求时，请求正文作为对象返回？

】使用$http.post(angular)和bodyparser.text()发送字符串请求时，请求正文作为对象返回？【英文标题】：Bodyofrequestcomesbackasobjectwhensendingstringrequestusing$http.post(angular)andbodyparser.text()?【发布时间】：2017-03-1023:16:28【问题描述】：当我发送... 查看详情

通过 POST 从 Angular 向 Springboot 发送数据

...020-01-2321:54:13【问题描述】：我正在尝试将一个json从我的前端angular项目发送到后端，即springboot。这是我第一次使用这两种技术，所以我缺乏经验。我不太确定我在Angular中的httppost方法是否错误，或者我的后端是否没有收听应该... 查看详情

从 vuejs 客户端向 oauth/token 发送 POST 请求时的 401 响应

】从vuejs客户端向oauth/token发送POST请求时的401响应【英文标题】：401responsewhenaPOSTrequestissenttooauth/tokenfromvuejsclient【发布时间】：2018-06-3002:09:32【问题描述】：当我使用邮递员时，我的spring应用程序身份验证工作正常。但是，当我... 查看详情

当我将 var 从 ajax 发送到 php 时，如果 (isset $_Post[]) 不起作用

】当我将var从ajax发送到php时，如果(isset$_Post[])不起作用【英文标题】：If(isset$_Post[])doesn\'tworkwhenisendavarfromajaxtophp【发布时间】：2021-12-1913:46:43【问题描述】：我在尝试将AJAX帖子捕获到我的PHP代码时遇到问题让我解释一下：所以... 查看详情

如何从 iOS 应用程序发送 POST XML？

】如何从iOS应用程序发送POSTXML？【英文标题】：HowtosendPOSTXMLfromiOSapp?【发布时间】：2012-11-2000:47:07【问题描述】：所以，我在网上一遍又一遍地搜索有关从iPhone应用程序使用POST发送XML的任何信息-到目前为止没有运气，没有！我... 查看详情