How do I return JSON-data from python to javascript?
Question: I'm working on a pythonfile which returns the variable "distance" and sends it
to a javascriptfile where I can put the value on my webpage.

My problem is that I don't know how to send the value from python to
javascript. I've heard you have to make the pythonfile return in JSON-format
and then make a ajax-request, but I can't find how to do it anywhere.

My question is: How do I set up the connection which makes me get the JSON-
data in javascript? I would really appriciate if someone showed me using code,
I'm very new to both python and javascript..

Edit: The data comes from a RaspberryPi with a distance-sensor. My python code
is:

    
    
    import RPi.GPIO as GPIO
    import time
    import io, json
    
    GPIO.setmode(GPIO.BCM)
    TRIG = 14
    ECHO = 15
    
    GPIO.setup(TRIG,GPIO.OUT)
    GPIO.setup(ECHO,GPIO.IN)
    
    revers = 1
    
    while revers == 1:
    
        GPIO.output(TRIG,0)
        time.sleep(0.5)
    
        GPIO.output(TRIG,1)
        time.sleep(0.00001)
        GPIO.output(TRIG,0)
    
        while GPIO.input(ECHO)==0:
            pulse_start = time.time()
    
        while GPIO.input(ECHO)==1:
            pulse_end = time.time()
    
        pulse_duration = pulse_end - pulse_start
        distance = pulse_duration * 17150
    GPIO.cleanup()
    

I'm not yet to write anything in javascript, simply because I don't know how
to make the ajax call, but my goal is to make the variable distance into JSON-
format and get it up on my webpage.


Answer: The python program can return any value in any format you want, but json is a
convenient format, which can be readily handled by both python programs and
javascript.

Your javascript needs to send a request to a server. The request will specify
that it wants to retrieve the python file. Note that a javascript request is
sent in reaction to some event--like the user clicking on a button.

The python program will reside somewhere in the directory structure of the
server. If your server is setup correctly, then when the request for a python
file is received, instead of returning the text of the python file, the server
will execute the python program and return the output of the python program.

The easiest way to make an ajax (i.e. a javascript) request is with jquery.
There are literally 10,000 tutorials, blogs, etc. about how to make ajax
requests with jquery. Here is one:

<http://www.tutorialspoint.com/jquery/jquery-ajax.htm>

Here is the relevant info in the jquery docs:

<https://api.jquery.com/jquery.get/>

> I'm very new to both python and javascript..

Then your desired program is most likely too complex.

Here is an ajax example:

**page.html**

    
    
    <!DOCTYPE html>
    <html>
    <head>
      <title>My Web Page</title>
    </head>
    
    <body>
      <p>Hello</p>
      <button id="my_button" type="button">Click me</button>
      <div id="ajax_results"></div>
    
    <!-- Download jquery library: -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    
    <!-- My jquery code: -->
    <script>
      $("#my_button").on('click', function() {
        $.get("http://localhost:8080/cgi-bin/my_prog.py", function(data) {
          $("#ajax_results").text(data);
        })
      });
    </script>
    
    </body>
    </html>
    

I make a request to my local server using the following url in my browser:

    
    
    http://localhost:8080/page.html
    

which loads page.html in my browser. As the page loads, my jquery code
executes, which adds an onclick handler to the button:

    
    
    $("#my_button").on('click', function() {....
    

Thereafter, if the button is clicked, the function will execute.

The following python program resides in a directory on my local server:

**my_prog.py**

    
    
    #!/usr/bin/env python3.4
    
    print("Content-Type: text/html\n\n")
    distance = 10
    print(distance)  #This is the body of the response
    

If I click on the button displayed in the web page, the jquery code sends a
request to the server for the file my_prog.py:

    
    
    $.get("http://localhost:8080/cgi-bin/my_prog.py", ....
    

My server is setup to execute that file--rather than return the text of the
file--then return the program's output as the response.

When the jquery code receives the response from the server, jquery calls the
following function:

    
    
    function(data) {
       $("#ajax_results").text(data);
    })
    

passing the body of the response as an argument. The function inserts the body
of the response, data, into the html tag with the id "ajax_results". Because
the body of the response is the string "10", 10 is displayed in the web page.

