Search code examples
pythonhtmltornado

Methods on linking a HTML Tornado server and Python file


This is my sample HTML file

    <html>
    <head>
    <title>
    </title>
    </head>
    <body>
    <form action="">
    Value a:<br>
    <input type="text" name="Va">
    <br>
    Value b:<br>
    <input type="text" name="Vb">
    <br><br>
    <input type="submit">
    </form>
    <textarea rows="4" cols="10">

    </textarea>
    <p>
    </p>
    </body>
    </html>

And a given template Tornado server code:(I also need help on the explanation of each section of the following code)

    import tornado.ioloop
    import tornado.web
    import tornado.httpserver
    import tornado.gen
    import tornado.options
    tornado.options.parse_command_line()  
    class APIHandler(tornado.web.RequestHandler):
        @tornado.web.asynchronous
        def get(self):
            self.render('template.html')
        @tornado.gen.engine
        def post(self):
            try:
                num = int(self.get_argument('num'))
            except:
                num = 5
            self.render('template.html')
    app = tornado.web.Application([(r"/next_rec",APIHandler),])        
    if __name__ == "__main__":
        server = tornado.httpserver.HTTPServer(app)
        server.bind(48763)
        server.start(5)
        tornado.ioloop.IOLoop.current().start()

and finally my python code:

    if __name__ == '__main__':
        a = int(raw_input())
        b = int(raw_input())
    print a+b

I am using a simple 'a+b' function to test out this feature. But my problem is I can't figure out a way to link them together. So my ultimate goal is to click on the "Submit" button on the HTML, pass on two values to the Tornado server, use it as input in my python script and finally show the output in the text area of the HTML or on another page. I'm know there are tons of information on the web, but I'm completely new to Tornado (near 0 knowledge) and most of them I can't really understand. Help on methods or keywords for search is much appreciated, thank you very much. (please keep answers as basic as possible, it will help a lot, thanks!)


Solution

  • First of all you should check the official documentation. It is quite simple and it targets the newcomers.

    Also in this short guide, the sections of a similar code as your is being explained with simplicity.

    Now for your code:

    On your template you need to specify that the form should send a post request on submit by adding <form method="post" id="sum_form">

    Also you need to make sure that you will be submit the data added in the form on an event: $("#sum_form").submit();

    On your post method you need to read the passed numbers from your client's form, add them and then send them back to the template as a parameter.

    For example:

    def post(self):
      numA = int(self.get_argument('Va'))
      numB = int(self.get_argument('VB'))
      sumAB = numA + numB
      self.render('template.html',sumAB=sumAB)
    

    In you template.html you need to add a field where you will display the passed sum as a jinja variable : {{sumAB}}