如何發送數據<div>從 html 到燒瓶

Question

我有一個帶有數據的 div 元素。 我想將 div 傳遞給燒瓶。 我知道我可以使用 request.form 來獲取后端的表單信息。 但我不確定如何從 div 中獲取不屬於表單的元素。

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>
         

我正在嘗試使用 ajax 在 Flask 后端執行 HTTP 請求。

    <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>
    
     
                 

這是我的燒瓶路線。 我正在嘗試將數據從 html 獲取到這里

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

我沒有在后端路由中獲得任何數據。

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>

塊引用

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