Python Flask: Return HTML Content

javascript python html string flask

28,056

You can use ajax with jquery:

In the main filename.py, include a route like this, that access the parameters from the json response from the frontend. Also, provide a route that will render the HTML template:

@app.route('/recieve_data')
def get_id():
   the_id = flask.request.args.get('button_id')
   return "<p>Got it!</p>"

@app.route('/', methods=['GET', 'POST'])
def home():
   return flask.render_template('filename.html')

In your HTML (stored in filename.html), utilize the code below:

<html>
  <head>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  </head>
  <body>
    <tr><td>
     <button id="socks.shirt.pants" type='button'> dummy text here</button>
     <div id='response'></div>
    </td></tr>
  </body>
  <script>
   $(document).ready(function() {
      $("button").click(function(event){
         var the_id = event.target.id;
         $.ajax({
            url: "/recieve_data",
            type: "get",
            data: {button_id: the_id},
           success: function(response) {
           $("#response").html(response);
         },
          error: function(xhr) {
        //Do Something to handle error
        }
       });
     });
   });
  </script>
</html>

28,056

user9494275

Updated on October 25, 2021

Comments

user9494275 over 2 years
i am trying to put together a makeshift tool for my own personal use, im not experienced with backend development at all. so my methods may be unconventional. although there may be a much better method to go about this

consider the following snippet from my html file:
```
<tr><td>
    <button id="socks.shirt.pants"> dummy text here </button>
</td></tr>
```
my goal, as simply as i can put it, is to click BUTTON and return the string text within the ID attribute in python using Flask. Below is the code i am working with.
```
app = Flask(__name__)
@app.route('/', methods=['GET', 'POST'])
def index():
    #display html file
    return send_from_directory('','myfile.html')
    #this is the part that needs help
    textdata = request.htmlcontent.td.id
```
i have tried several different ways to extract the html content. including but not limited to:
```
request.html.tr.id,
request.get_data(),
request.data(),
request.form,
```
i understand now that request.form returns user-supplied information submitted in a form, which wont work for me because the information that i want to retrieve will be hardcoded into the html file under whichever tag that would allow this process to work. (currently tr -> td -> button). the other methods either returned None or an some empty string, i believe.

also, i am wondering if maybe there is some piece of javascript code that ill need to use in addition to Flask as well? i hope that this is not an unrealistic expectation to ask this question! any suggestions would help greatly!