如何在不重新加载或重新渲染页面的情况下，从Node.js后端向前端返回JSON？

Question

我正在使用node.js。

我想要按下搜索按钮，在后端进行一些REST API调用并将json返回到前端，然后重新加载前端的一个div，以便我不必刷新页面。现在我知道我可以使用jQuery或JavaScript Dom操作仅重新加载一个div。

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

谢谢。

- gruuuvy

---

你是在说AJAX对吧？jQuery AJAX。 - Brandon Boone

你是在询问如何从浏览器向服务器执行 AJAX 吗？还是在询问如何从服务器向另一个服务器发起 HTTP 调用？因为我有点困惑。 - freakish

你是在询问如何使用node.js仅显示json而没有html吗？ - cuzzea

我想知道如何从浏览器向服务器发起AJAX请求。我希望浏览器调用服务器，服务器进行一些REST调用，并将JSON返回给浏览器，而不需要刷新页面。 - gruuuvy

我尝试使用jQuery AJAX，但由于同源策略的限制，我无法向另一个服务器发起REST调用。 - gruuuvy

所以你想调用一个位于不同域名的服务器？那就是完全不同的问题了，与你发布的问题毫无关系。请阅读有关JSONP的内容。 - freakish

Answer 1

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>

- Justin Thomas

---

当res.send()执行时，前端将如何接收和使用数据？ - gruuuvy

这似乎是他已经拥有的东西。我认为他需要客户端部分。 - Brandon Boone

Brandon是正确的，我不确定如何编写客户端来使用那些数据。 - gruuuvy

Answer 2

以下演示了如何进行基本的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);
    }); 
});

​ ​

- Brandon Boone

---

啊，那我可以调用自己的/search函数，然后再由该函数向远程服务器发起API调用。这样就不会违反同源策略了，是吧？ - gruuuvy

只要你可以通过不更改域名、端口和协议来访问你的节点服务器，例如：（http://localhost:8080），那么就没问题了。否则，你就需要实现一个JSONP服务，这是一种相当不同的东西。 - Brandon Boone

太棒了，谢谢你，我认为这会起作用。我稍后会试一下！ - gruuuvy

Answer 3

总结评论（遗憾的是，问题没有被正确提出）：您想要做的是向位于不同域上的服务器发起AJAX调用，然后使用JavaScript。通常情况下，由于同源策略，您无法这样做。但是有一些黑客技巧：

1）使用jQuery的AJAX和dataType: 'jsonp'。您应该阅读并了解更多关于JSONP的知识。

2）发起一个AJAX调用到您的域，并让服务器调用另一个服务器。使用Node.JS，您可以使用以下代码：

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

请查看文档。

- freakish