How can I return JSON from node.js backend to frontend without reloading or re-rendering the page?

javascript jquery node.js dom post

14,789

Solution 1

The following demonstrates how to make a basic AJAX request.

$(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);
    }); 
});

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

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

14,789

Author by

gruuuvy

Updated on August 16, 2022

Comments

gruuuvy almost 2 years

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.
- Brandon Boone almost 12 years
  
  You're talking about AJAX right? jQuery AJAX.
- freakish almost 12 years
  
  Are you simply asking how to do AJAX from browser to server? Or are you asking how to make HTTP call from the server to another server? Cause I'm a bit confused.
- cuzzea almost 12 years
  
  Or are you asking how to use node.js to only show json with no html?
- gruuuvy almost 12 years
  
  I'm asking how to do AJAX from browser to server. I want the browser to call the server, which will make some REST calls, and return JSON back to browser. Without refresh.
- gruuuvy almost 12 years
  
  I tried to use jQuery AJAX, but I couldn't make rest calls to another server because of Same origin policy.
- freakish almost 12 years
  
  So you want to call a server which is on a different domain then the web page?? That's entirely different question then the one you posted. :) Read about JSONP.
gruuuvy almost 12 years

When res.send() executes, how will the front end receive and use the data?
Brandon Boone almost 12 years

This looks like it's something he already has. I think he needs the client portion.
gruuuvy almost 12 years

Brandon is right, I'm not sure how to code up the client to use that data.
gruuuvy almost 12 years

AH. So I can call my own /search, which in turn will make the API call to the remote server. Then this won't violate same origin policy and I have what I need, right?
Brandon Boone almost 12 years

As long as you can get to your node server without changing the domain, port, and protocol Example:(http ://localhost:8080) then you should be fine. Otherwise you'll have to implement a JSONP service which is something fairly different.
gruuuvy almost 12 years

Awesome, thank you, I think this will work. I shall try it later!