Nodejs - Express JSON 解析器无法响应

Posted 2023-03-07

【中文标题】Nodejs - Express JSON 解析器无法响应

【英文标题】：Nodejs - Express JSON parser cannot respond back

【发布时间】：2016-06-24 09:25:29

【问题描述】：

我的问题：一旦我将带有 JQuery 的 JSON 对象提交到使用 JSON 解析器（属于模块 body-parser）的 express 应用程序并尝试回复它，无论是 res.send 还是 res.render，它什么也没做。我尝试将 html 作为 html 响应直接输出回客户端。 另一方面，在我网站的同一页面上，我尝试了常规的正文解析器，并且响应正常。 这是我的 JSON 监听器：

controller.js：

var express = require('express');
var app = express();

var bodyParser = require('body-parser');
var jsonParser = bodyParser.json();
var urlencodedParser = bodyParser.urlencoded( extended:
false ); 

app.post('/video', jsonParser, function(req, res) 
res.send("hi"); //nothing happens

console.log(req.body.time); //works, i get the data
console.log(req.body.src); //works, i get the data
);

提交给它的表单：

index.html

...mywebsite code, uses jquery
fu();

function fu()
    var vid = document.getElementById("vid");
    var time = vid.currentTime;
    var src = vid.currentSrc;
    $.ajax(
        type: "POST",
        url: "/video",
        data: JSON.stringify(time: time, src: src  ), //the data is parsed fine
        dataType: 'json',
        contentType: 'application/json'
    );

    //alert("current time: " + time);
;

---

现在，我尝试了一个带有正文解析器的简单表单，它在完全相同的网站上运行良好（我把它放在那里只是为了看看它是否可以工作）：

controller.js

 var express = require('express');
var app = express();

var bodyParser = require('body-parser');
var jsonParser = bodyParser.json();
var urlencodedParser = bodyParser.urlencoded( extended:
false ); 

app.post('/person', urlencodedParser, function(req, res)
    res.send('Thanks!');
    console.log(req.body.firstname);
    console.log(req.body.lastname);    
);

人形：

      <form method="POST" action="/person">
        Firstname: <input type ="text" id="firstname"
        name="firstname"><br>
        Lastname: <input type ="text" id="lastname"
        name="lastname">
        <input type="submit" value="sumbit">
    </form>     

【问题讨论】：

您不必stringify 发送到服务器的数据。试试：data: time: time, src: src 。

没有stringify是不行的，我刚试过...

我确实工作得很好。至少如果你像我一样安排你的服务器：gist.github.com/Nonemoticoner/366c02f7db613566d3cf

您写了dataType: 'json'，但您发送了纯文本作为回复。此外，我相信捕捉对任何变量的响应都会很有用。目前，您的 AJAX 请求对它没有任何作用。

好的，我尝试了没有 stringify 的示例，它可以工作。我可以在控制台上看到数据。但是，仍然没有任何回应。 “嗨”不会出现。

【参考方案1】：

嗯，看起来很简单——你没有在第二个 sn-p 中使用jsonParser——只是urlencodedParser，这里不正确。所以它应该看起来像这里：

var express = require('express');
var app = express();

var bodyParser = require('body-parser');
var jsonParser = bodyParser.json();
var urlencodedParser = bodyParser.urlencoded( extended: false ); 

app.post('/person', jsonParser, function(req, res)
    res.send('Thanks!');
    console.log(req.body.firstname);
    console.log(req.body.lastname);    
);

【讨论】：

不，我的问题在于第一个示例。 “现在，我已经尝试了一个带有身体的简单形式......”之后的所有内容都是我的第二个例子。顺便说一句，第二个示例可以正常工作，无需使用 json 解析器。

好的，所以我不明白send 方法什么都不做是什么意思，您的意思是没有给出响应或浏览器中什么也没发生？因为您在浏览器端没有任何处理程序代码（jQuery 中的done 方法）。

浏览器不显示 res.send 发送的“hi”消息。现在，在我的第二个示例中，它确实显示了它，我的整个网站 html 被“删除”，我看到“谢谢！”

【参考方案2】：

$.ajax请求后需要在客户端处理响应。设置done函数处理成功回调：

$.ajax(
        type: "POST",
        url: "/video",
        data: time: time, src: src  ,
        dataType: 'json',
        contentType: 'application/json'
    )
    .done(function( data, status, xhttp) 
         // put the data in the DOM 
         document.getElementById("hi").text(data);
    );

【讨论】：

这就是 ajax 的工作原理，好的。还有其他方法不会直接成功吗？只是为了常识。

当然，您可以处理其他选项，例如：error、complete。看看这个：api.jquery.com/jquery.ajax

不，我的意思是 - 只需渲染您想要发回的整个页面并将其作为一个整体作为响应发送，不要将其全部作为字符串发送到属于 ajax 的函数中然后决定如何处理它

好吧，AJAX 就是为了做到这一点，发送一些东西而不需要渲染整个页面。如果要渲染整个页面，只需向服务器发出 HTTP 请求并返回视图。

【参考方案3】：

你可以尝试用 polyfill "fetch" 代替 jQuery：

function getResponse (url) 
  return fetch(url, 
      method: 'post',
        headers: 
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        ,
        body: JSON.stringify( time, src )
      )
      .then(response => response.json())
      .then(data => 
        console.log('request succeeded with JSON response', data)
      )
      .catch(error => 
        console.log('request failed', error)
      )

我认为它看起来会好很多。它可以在服务器端使用。 文档：https://github.com/github/fetch