how to send data in <div> from html to flask

Question

I have a div element with data. I want to pass the div to flask. I know I can use request.form to get the form information on the backend. But I am not sure how to get the elements from the div that are not apart of the form.

Here is my div and I'm have data with(item1, item2...)
           
    <div id="rightdiv">
       item1,item2,item3,item4
       <form action="{{ (url_for('get_div_info') }}">
          <input type="submit" value="Submit">
       </form>
    </div>
         

I'm trying to use ajax to perform a HTTP request on flask backend.

    <script>
       let yourdiv = $("#rightdiv").html();
       $.ajax({
           type: 'post',
           url: '/divinfo',
           data: JSON.stringify(yourdiv),
           contentType: "application/json; charset=utf-8",
           success: function (data) {
               console.log(data);
           }
       });
    </script>
    
     
                 

Here is my flask route. I'm trying get the data from html to here

       @app.route('/get_divinfo', methods=['POST'])
       def get_divinfo():
           divinfo = flask.request.get_json()
           print(divinfo)
       return 'test'
    

I'm not getting any data in the back end routes.

Answer 1

HTML

<div>
   <span id="rightdiv">item1,item2,item3,item4</span>
       <input type="submit" value="Submit" id="submit_btn">
</div>

JS

<script>
       $("#submit_btn").click(function(e) {
                yourdiv = $("#rightdiv").html();
                $.ajax({
                        type: 'POST',
                        url: '/divinfo',
                        data: {'yourdiv': yourdiv},
                        success: function() {
                            alert('Successful!')
                        },
                        error: function() {
                            alert("Oops! Something went wrong.");
                        }
                });
            })  
      </script>

Blockquote

@app.route('/divinfo', methods=['POST'])
    def get_divinfo():
        divinfo = request.form['yourdiv']
        print(divinfo)
    return ('', 200)