如何在不重新加载或重新呈现页面的情况下将 JSON 从 node.js 后端返回到前端？答案

【问题标题】：How can I return JSON from node.js backend to frontend without reloading or re-rendering the page?如何在不重新加载或重新呈现页面的情况下将 JSON 从 node.js 后端返回到前端？
【发布时间】：2012-06-28 06:23:20
【问题描述】：

我正在使用 node.js。

我想按一个搜索按钮，在后端对另一台服务器进行一些rest api调用并将json返回到前端，然后在前端重新加载一个div，这样我就不必刷新了页。现在我知道我可以只用 jQuery 重新加载一个 div 或者只用 Javascript dom 操作。

但是如何让它在服务器端调用一个方法呢？我可以有一个提交按钮，它会发出一个发布请求，我可以捕获它并从那里进行我的 api 调用，但是从 node.js 方面，当我返回时，我将不得不再次呈现页面。如何在不重新渲染或刷新页面的情况下将 JSON 从后端返回到前端？

谢谢。

【问题讨论】：

您说的是 AJAX 对吧？ jQuery AJAX.
您只是在问如何从浏览器到服务器进行 AJAX？或者您是在问如何从服务器向另一台服务器进行 HTTP 调用？因为我有点困惑。
或者你问如何使用node.js只显示没有html的json？
我在问如何从浏览器到服务器进行 AJAX。我希望浏览器调用服务器，这将进行一些 REST 调用，并将 JSON 返回给浏览器。不刷新。
我尝试使用 jQuery AJAX，但由于同源策略，我无法对另一台服务器进行休息调用。

标签： javascript jquery node.js dom post

【解决方案1】：

以下演示如何发出基本的 AJAX 请求。

小提琴：http://jsfiddle.net/tWdhy/1/

$(function(){
    $.ajax({
        url: '/echo/json/', //the URL to your node.js server that has data
        dataType: 'json',
        cache: false
    }).done(function(data){
        //"data" will be JSON. Do what you want with it. 
        alert(data);
    }); 
});

【讨论】：

啊。所以我可以调用我自己的 /search，这反过来会调用远程服务器的 API。那么这不会违反同源政策，我有我需要的，对吧？
只要您可以在不更改域、端口和协议的情况下访问您的节点服务器示例：(http://localhost:8080)，那么您应该没问题。否则你将不得不实现一个完全不同的 JSONP 服务。
太棒了，谢谢，我认为这会奏效。以后我会试试的！

【解决方案2】：

http://expressjs.com/

服务器上大致是这样的：

var app = express.createServer();
app.use(express.bodyParser());
app.post('/search', function(req, res){
   search_form = req.body;  // <-- search items
   MySearch.doSearch(search_form,function(err,items) {
       res.send(items);
   });
});

app.listen(3000);

您必须实现 doSearch 代码才能返回您正在搜索的任何内容....

客户：

   <script>
   $.ajax( {
      url: '/search',
      data: search_form,
      type: 'POST',
      success: function(items) {
          /* do something with items here */
          // You will likely want a template so you don't have to format the string by hand
        for( var item in items ) {
           $('#results').append('<div>'+item.interestingField+'</div>);
        }
      }
   });
   </script>

【讨论】：

res.send()执行时，前端将如何接收和使用数据？
这看起来像是他已经拥有的东西。我认为他需要客户部分。
Brandon 是对的，我不确定如何编写客户端代码以使用该数据。

【解决方案3】：

总结 cmets（遗憾的是，问题没有正确提出）：您想要的是对位于不同域上的服务器进行 AJAX 调用，然后是 JavaScript。通常，由于相同的原产地政策，您不能这样做。不过也有一些小技巧：

1) 使用 jQuery 的 AJAX 和 dataType: 'jsonp'。您应该阅读并了解有关 JSONP 的更多信息。

2) 对您的域进行 AJAX 调用，让服务器调用另一台服务器。使用 Node.JS，您可以使用：

var http = require('http');
http.request(/* options */);

见the documentation。

【讨论】：