How do I invoke and retrieve results from Python through Node JS?

Question

Hi I want to invoke a Python code (name of code is match.py) and retrieve its results through HTML/Javascript (I'm using Node JS). What I currently have is:

 <div class="panel-body">
 <form role="form" method="POST" action="new">
 <button type="find" id="find" onclick="match()" class="btn btn-default">Find Match</button>
 <script>
 $(function() {
 $('find').click(function() {
 $.ajax({
 url: '/Users/reinapark/Downloads/match17/match.py',
 data: $('form').serialize(),
 type: 'POST',
 success: function(response) {
 console.log(response);
 $("#div1").html(response);
 },
 error: function(error) {
 console.log(error);
 }
 });
 });
 });
 </script>
 </form>
 </div>

My questions are: 1. How do I send data to the Python code? 2. What does the #div1 here do?

Sorry if the questions don't make sense - I'm a Python/Node JS beginner not too sure what I'm doing here!!

• Kumar Shubham: You can only execute the python code by executing that code by a server. You cannot simply access this python script on your disk to run it and get results out of it.
• whackamadoodle3000: Maybe their disk is their server...
• Klaus D.: Please explain your components in details.

Answer 1

Your code shows some HTML with some JavaScript code that makes an Ajax request. It has nothing to do with NodeJS.

NodeJS, on the other hand, is JavaScript run-time environment for executing JavaScript code on the server-side.

So, your code is executed on the client side(in the browser) and sends an Ajax request to the server to asynchronously fetch some data from the server and refresh the part of the webpage with the new data without refreshing the whole page.

Regarding your questions:

1. Your code doesn't work, because you're trying to get a local file whit this line (url: '/Users/reinapark/Downloads/match17/match.py',). That is not possible since, browsers can't access local files that way because of security risks. So, you must run your python code on the server, make an interface for that data to be fetched(for example by making a web service), and get that data from the server using JavaScript Ajax call as you tried.

Take a look at the RESTful web services.

2. the first div just represents the section of an HTML page. It groups the HTML elements together. Your div also has class attribute defined, which can be used in JavaScript to get that particular div:

   document.getElementsByClassName("panel-body");

or to set some CSS to all the HTML elements of that class. For example in your .css file like this:

 .panel-body {
 width: 500px;
 margin: auto;
 border: 3px solid #73AD21;
 }

$('#div1') is a jQuery code to get the element with the id 'div1'. It is same as typing document.getElementByID('div1') in pure JavaScript.

`$('#div1').html(response)` changes the html of that div to the response received.

Answer 2

Okay so I am answering based on my understanding and what I assume that you want to retrieve the result of the script which is /Users/reinapark/Downloads/match17/match.py

So here is the thing you can not access the result of match.py from browser you need a web server like apache, nginx to run this on server side which later can be accessed by your javascript.

I would suggest you to start looking how to run python program on web server you will get lots of tutorials on google.

Now coming to second question.

 $("#div1").html(response); what does this do ?

Actually it is javascript code # stands fo id of a html statement

Like in below code id is find

 <button type="find" id="find" onclick="match()" class="btn btn-default">Find Match</button>

represents to id whereas . represents to class

So basically when you do this

$("#div1").html(response);

you are adding the response from the address you mentioned in url to the html element which has id div1

I hope this helps you to start with