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

Question

I am working with node.js.

I want to press a search button, make some rest api calls to another server in the backend and return the json back to the front end, and reload a div in the front end so that I won't have to refresh the page. Now I know I can reload just a div with jQuery or just Javascript dom manipulation.

But how do I make it call a method on the server side? I could have a submit button and it will make a post request and I can catch it and make my api calls from there, however from the node.js side, when I return, I will have to render the page again. How do I go about returning JSON from the back end to the front end without re-rendering or refreshing my page?

Thanks.

Answer 1

The following demonstrates how to make a basic AJAX request.

Fiddle: 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);
    }); 
});

​ ​

Answer 2

http://expressjs.com/

Roughly something like this on the server:

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

You will have to implement the doSearch code to return whatever you are searching....

Client:

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

Answer 3

Summarizing comments (sadly, the question is not asked properly): what you want is to make an AJAX call to the server which is on a different domain, then the JavaScript. Normally you can't do that because of the same origin policy. There are however some hacks:

1) Use jQuery's AJAX with dataType: 'jsonp' . You should read and learn more about JSONP.

2) Make an AJAX call to your domain and let the server call another server. With Node.JS you can use this:

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

See the documentation .