如何将<div>中的数据从html发送到烧瓶

时间:2020-10-05 16:04:50

标签: javascript python html jquery flask

我有一个带数据的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'
    

我在后端路由中没有任何数据。

1 个答案:

答案 0 :(得分:0)

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)