无法捕获对节点服务器的 POST 请求的响应答案

【问题标题】：unable to capture response to a POST request to a node server无法捕获对节点服务器的 POST 请求的响应
【发布时间】：2019-01-08 12:36:15
【问题描述】：

我正在学习使用 node 和 express。我正在使用 node express 和 google translate API 创建一个演示站点来学习各种功能。我遇到的问题是，当我将数据发布到服务器以进行计算和返回时，服务器接收到请求并发送响应，但浏览器不显示结果。相反，控制台显示“导航到 localhost:8080/？”。我在本地托管。

这是服务器应用的代码：

var express = require('express');
var http = require('http');
var bodyParser = require('body-parser');
var path = require('path');
var fs = require('fs');
var morgan = require('morgan');
var settings = require('./settings');
var googleTranslate = require('google-translate')(settings.googleApiKey);

var port = 8080;
var hostname = 'localhost';
var app = express();

app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(express.static(__dirname));

app.post('/', (req, res, next) => {
  console.log("incoming post request");
  console.log("text to detect: " + req.body.text);

  googleTranslate.detectLanguage(req.body.text, function(err, detection) {
    console.log(detection.language);

    res.status(200);
    res.contentType('text/plain');
    res.end(detection.language);
  });
});

var server = http.createServer(app);

server.listen(port, hostname, function() {
  console.log('Server running at http://' + hostname + ':' + port);
});

应该进行 Ajax 调用并显示响应的函数的代码。这是从 index.html (get-langdetect.js) 中的脚本标记调用的文件中：

var inputField = document.querySelector('#input');
var detectOutput = document.querySelector('#langlayer-output');

var getLang = function getLang() {
  const data = JSON.stringify({
    text: inputField.value
  });

  fetch('http://localhost:8080/', {
    method: "POST",
    headers: {
      'Content-type': 'application/json',
    },
    body: data
  }).then((response) => {
    if (response.ok) {
      console.log('received response!');
      return response.body;
    }
  }).then((data) => {
    console.log(data);
    inputField.innerHTML = '<text>' + data + '</text>';
  });
};

相关index.html代码sn-p：

<div class="jumbotron">
  <div class="center-elem">
    <h1 class="center-elem">Detection</h1>
  </div>

  <form>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Enter text to detect" id="input">
      <div class="input-group-btn">
        <button class="btn btn-default" type="submit" onclick="getLang()">
          Submit
        </button>
      </div>
    </div>
    <div id="langlayer-output">
    </div>
  </form>
</div>
<script src='./get-langdetect.js'></script>

【问题讨论】：

Navigated to 日志似乎无关紧要，可能会在您打开页面时被 Chrome 记录。如果删除第一个 then 块中的 if 语句会发生什么？只需 console.log 响应。它甚至有 ok 属性吗？
另外，如果您使用的是 Chrome，您可以打开 Javascript 控制台并单击“网络”选项卡。然后提交表单，就可以看到请求，以及是否响应，响应体，响应头等。这样可以帮助排查此类问题。
@Partik 每次点击提交时都会出现导航到的日志。页面刷新。我尝试删除 if 语句并且行为是相同的。
请看下面我的回答。如果它解决了您的问题，您可以选择它作为答案。如果没有，您可以评论为什么它不能解决您的问题。

标签： javascript node.js ajax http express

【解决方案1】：

提交表单时，预计它们要么刷新页面，要么导航到<form> 的action 属性中的url。

避免这种情况的快速方法是将return false; 放在函数后面。

<button class="btn btn-default" type="submit" onclick="getLang(); return false;">
    Submit
</button>

这是一个很好的阅读主题。 http://www.codexpedia.com/javascript/submitting-html-form-without-reload-the-page/

我建议对<form> 元素及其基本用法做一些功课，以了解典型行为。

【讨论】：