CODEWITHSUNDEEP
javascriptnode.jsexpress
user988544
user988544

Reputation: 576

Node Express pass variable from client to server

I am trying to return value from an input box to a variable in route, by taking this source as a reference but am stuck, in the example author is searching a keyword, constructing a url using this keyword, and returning a body response.

My use case is a little different I need user to provide a url as a string in search box, which I would then pass to my request function to spit response body

Current app.js (server-side) 

app.get('/searching', function(req, res){

  // input value from search
  var url = req.query.search;
  console.log(url); // prints value

  request({ uri: url}, function (error, response, body) {
    if (!error) {
      content = body;
      console.log(content);
    } else {
        console.log('Oops! Error when contacting slack.com');
    }
  });


  res.send(content);
});

main.js (client-side)

    $(function(){
     $('#submit').on( 'click', function () {
        var sSearch = $('#search').val();
        var parameters = { search: sSearch };
           $.get( '/searching',parameters, function(data) {
           $('#results').html(data);
        });
    });
   });

I realize /searching in both above files must be replaced because currently its trying to 'search' the user entered url value as a query string, so if I enter "https://google.com" in the text box the application tries to search:

http://localhost:3000/searching?search=https%3A%2F%2Fgoogle.com

instead I need it to pass this url as is to the request function so that I can print the body response, which in this case would be the page's source code. But am not sure how should I proceed

index.jade (template)

extends layout

block content
    input#search(type="search", placeholder="Enter Keyword")
    button#submit(type='submit',class='btn btn-success') Search
    h2#results

    script(src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js")
    script(src="/javascripts/main.js")

How should I format so that I can pass the variable from client to server and then send it back to client after processing? Any help is appreciated.

Upvotes: 1

Views: 5063

Answers (2)

kiran
kiran

Reputation: 384

In the app.js you are making a async http call, but the response is sent before the http callback is invoked. Just move the res.send(content); inside the call back 

app.get('/searching', function(req, res){

   // input value from search
  var url = req.query.search;
  console.log(url); // prints value

  request({ uri: url}, function (error, response, body) {
    if (!error) {
      content = body;
      console.log(content);
    } else {
      console.log('Oops! Error when contacting slack.com');
    }
    res.send(content);
  });
});

Upvotes: 2

cshion
cshion

Reputation: 1213

i see ajax request in your client code , so in your server code, try to response something like this : 

  res.status(200).json(content)

in your client code ,check if the content is there (console.log(data) before $().html(data)... )

PD : request is async , so you have to response inside request callback.

Upvotes: 0

Related Questions