代码之家 › 专栏 › 技术社区 › ProfessorFinesse

在默认表单中完成帖子请求时,“res.send”会去哪里?

web-development-server backend express node.js reactjs

0

ProfessorFinesse · 技术社区 · 1 年前

假设我有一个表单(用JSX编写)被发送到Express服务器:

<form id="log-in-form-itself" action="/submit-form" method="post">
    <label htmlFor="username" >Username</label>
    <input type="text" id="username" name="username"  required></input>
    <label htmlFor="password">Password</label>
    <input type="password" id="password" name="password" required></input>
     <button id="log-in-button">Log In</button>
</form>

我知道表单将使用“/submit form”路由发送到服务器。该路线将在Express中按如下方式处理:

app.post("/submit-form", (req, res) => {

    //some form processing. Doesn't matter.
    res.send("some value");

});

我的问题是,如何在前端代码中访问“res.send()”的值?这不像一个正常的获取请求,我会有一个响应对象来使用。post请求嵌入在表单本身中,那么我如何访问它的响应呢?

为了清楚起见,我使用React作为前端,使用Express作为后端。

1 回复 | 直到 1 年前

1

0

Kostas Minaidis 1 年前

回答您的问题:

在默认表单中完成帖子请求时,“res.send”会去哪里

它通过HTTP响应返回浏览器,该响应基本上是在后端(在您的情况下是由Express)生成并通过 res.send 命令。除非使用JS处理表单请求,否则无法动态处理此响应。

原生HTML表单提交意味着您正在执行HTTP Post请求,并从后端获取某种资源。

“如何在前端手动访问它?没有响应对象。”

您无法在前端“手动”访问它,因为将加载一个新页面。动态地做某事的唯一选择是以某种形式将数据嵌入到响应页面中,并嵌入一些JS来处理这些数据。

将表单提交的数据硬编码到从服务器返回的页面中的一种方法是使用 script 带有JSON格式数据的标签:

(这是Express.JS使用从表单POST请求收到的数据生成的HTML的一部分)

<script type="application/json" id="json-data">
{
  "username": "Ada",
  "password": "Lovelace"
}
</script>
<script>
  const dataEl = document.querySelector("#json-data");
  const json = dataEl.textContent;
  console.log( JSON.parse(json).username );
  console.log( JSON.parse(json).username.toUpperCase() );
</script>

我的建议是从Express发送纯JSON响应,并通过JavaScript处理表单提交,因为上述方法过于复杂。