如何使用表格调用python函数而不是脚本？

Question

I've been reading the book 'Head First Python' where the writer talks about creating dynamic webpages using a module he created called 'yate', an HTML template engine (which I renamed to site_yate in the code below). The example he works through is a hypothetical coach wanting his athletes to be able to check their times online. The design is as follows: first you enter the homepage which has a link to run a script which generates a webpage where you can select the athlete whose times you want to view. Then when you select your athlete and click submit the form calls another script called "site_generate_timing_data.py" where you can views the athlete's top times. So I decided to take it further and add functionality to add a time for the athlete, using this extra line of code in my python script.

print(site_yate.do_form("addtime.py", [athlete_id]))

The HTML this will generate will be this:

<form action="addtime.py" method="POST">
<h1>Want to add a time?</h1>
<input type="Text" name="1" size=40> //"1" is the athlete's id in this example
<input type="Submit" value="Submit">
</form>

As you can see this code calls the script 'addtime.py' which has the following code:

import cgi
import sqlite3

data = cgi.FieldStorage().value[0] #this attribute will be in the form MininFieldStorage(name, value)
id = data.name #this attribute is the input's name i.e. athlete's id
time = data.value #this attribute is the input's value i.e. the time

connection = sqlite3.connect("NUACDB.sqlite") #my DB's name
cursor = connection.cursor()
cursor.execute("""INSERT INTO timing_data (athlete_id, time) 
                VALUES (?, ?)""",
                (id, time)) #just SQL stuff
connection.commit()
connection.close()

Which works fine, however I want to change a few thing about this, since it leaves the user on a blank page. I could generate some HTML code to provide links to the homepage etc. or even JavaScript code to redirect the user automatically, but I want to keep this script HTML-free so that I can also use it elsewhere.

What I want to do instead is make the script execute on the same page. Not only that, but I would also prefer if I could put the addtime.py code as a function in another module called 'athletemodel.py' and call it form there, ie athletemodel.addtime() (or I could do from athletemodel import addtime so I can call the function directly). How can I call a python function using HTML code? I'm aware of the onsubmit="" form attribute but apparently that is for JavaScript functions. Another thing I'm unsure about is whether the data submitted in the form will still be accessible through CGI FieldStorage and hence whether my addtime.py code will still work as it is.

This stuff is so confusing! All help is appreciated.

Answer 1

Not sure if you already had it in mind, but I would use ajax (remember to include the jQuery library). Here's a rough example to get you started if this is what you want. It'll keep them on the same page:

JavaScript file:

$('#submitButtonId').click(function (event) {
        event.preventDefault();
        $('#submitButtonId').hide();
        $('#thinking').show(); //some div with a nice ajax loader gif...
        $.ajax({
            type: 'POST',
            data: $('#formId').serialize(),
            url: '/URL_path_to_function',
            success: function (data) {
                $('#loading').hide();
                var response = data.result  //now do stuff with your response
                }
            error: function(error){
                   console.log('Error')}
         });

Python view/function:

import jsonify
if request.method == 'POST':
    value = request.form['input value'] #flask...
    #Do stuff
    return jsonify(result='Some response')