CODEWITHSUNDEEP
javascriptnode.js
SCJP1.6 PWR
SCJP1.6 PWR

Reputation: 371

Node JS - call function on server from client javascript

I have written a server.js. Below is the code:-

var http = require('http');
var fs = require('fs');
var my_code = require('./my_code');

function send404Response (response) {
    response.writeHead(404, {"Context-Type" : "text\plain"});
    response.write("Error 404: Page not found");
    response.end();
}

function onRequest(request, response) {
    if (request.method == 'GET' && request.url == '/') {
        response.writeHead(200, {"Context-Type" : "text\plain"});
        fs.createReadStream ('./index.html').pipe(response);
    } else {
        send404Response(response);
    }
}

http.createServer(onRequest).listen(8888);
console.log("Server is now running");

Another server side js written in node is my_code.js. Below is the code:-

var https = require('https');
module.exports.func = myFunction;

function myFunction(myParam) {
    console.log (myParam);
}

myFunction(myParam) should be called from client side javascript which will pass myParam. But client side javascript is throwing error saying myFunction is not found.

Please find HTML which contains client side javascript below:-

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#button').click(function() {
        $.ajax('/', function(list) {
            myFunction($('#myField').text()); //How to do it
        });
    });
});
</script>
</head>
<form>
    <div id="contactno">myField:<input type="text" name="myField">  </div>
    <div id="button"><input type="button" value="Submit"></div>       
</form>
</html>

Before hitting above html page, I am running node server.js
Please let me know best way to call myFunction from client side.
Thanks in Advance.

Upvotes: 1

Views: 10061

Answers (1)

Zlatko
Zlatko

Reputation: 19569

Obviously, as you've figured out, you cannot call this function on the client as it's not available there. So your client has to call the server, right?

So the client code would have to pass the $('#myField').text() to the server, and server would have to have another endpoint to receive this, call myFunction on this, and return the result.

You can do it in many different ways, here is one simple example.

Expand the server with another endpoint

function onRequest(request, response) {

  if (request.method == 'GET' && request.url == '/') {
    response.writeHead(200, {"Context-Type" : "text\plain"});
    fs.createReadStream ('./index.html').pipe(response);
  } else if (request.method === 'POST' && request.url == '/do-work') {

    // asuming sync as in your example
    let result = my_code.func(request.body); 
    response.writeHead(200, {"Context-Type" : "application/json"});
    response.write(JSON.stringify({

      result: result
    });
    response.end();
  } else {
    send404Response(response);
  }
}

(I'm not touching on some not-so-good practices and codes here to keep my answer focused to your question.)

You would also have to extend your client code.

$('#button').click(function() {
    $.ajax('/', function(list) {
        $.ajax({
            type: 'POST',
            url: '/do-work',
            data: $('#myField').text()
            success: function(result) {
              console.log('Response:', result);
            }
        }
    });
});

Upvotes: 1

Related Questions