Question

我正在学习使用节点和表达。我正在使用Node Express和Google Translation 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 代码段：

<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>

Answer 1

提交表单时，期望它们要么刷新页面，要么导航到action上<form>属性中的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>元素及其基本用法进行一些功课，以了解典型行为。

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

1 个答案: