javascript - 如何从flask接收数据到jquery？

Question

我正在尝试从烧瓶端点之一读取数据到 jquery

如下

<script>

      function send_response_to_the_server(client_response){
            $.ajax({
                url:"http://127.0.0.1:5001/transactions/new",
                type: "POST",
                datatype: 'json',
                headers: {'Access-Control-Allow-Origin': '*'},
                data: client_response,

                success: function(response){
                    console.log(response);
                },
                error: function(error){
                    console.log(error);
                }

            });
        }

        $(function() {
           $("#generate_transaction").click(function(){
                $.ajax({
                    url:"/new/transaction",
                    type:"POST",
                    dataType: 'json',
                    headers: {'Access-Control-Allow-Origin': '*'},
                    data:$('#transaction_form').serialize(),

                    success: function(response){
                       //setting the Amount field empty
                       document.getElementById('Amount').value = ''
                     
                     //calling the function to send the response back to the server
                     send_response_to_the_server(response);


                    },
                    error: function(error){

                        console.log(error);
                    }
                });

           });

           });

    </script>

这里的“#generate_transaction”是按钮，它从表单“#transaction_form”中获取数据以发回 URL“/new/transaction”

所以在http://127.0.0.1:8001上运行的烧瓶应用程序中，我已设置返回带有附加响应的数据

@app.route('/new/transaction', methods=['POST'])
def generate_transaction():
    amount= request.form['Amount']
    response = {
        'Amount':amount,
        'Signature':'123'
    }
    return jsonify(response)

现在我想从“/new/transaction”读取上述响应以发送回其他 url

http://127.0.0.1:5001/transactions/new

 $("#generate_transaction").click(function(){
                $.ajax({
                    url:"http://127.0.0.1:5001/transactions/new",
                    type:"POST",
                    dataType: 'json',
                    headers: {'Access-Control-Allow-Origin': '*'},
                    data: ,

                    success: function(response){

                       console.log(response)


                    },
                    error: function(error){

                        console.log(error);
                    }


                });

           });

服务器部分

http://127.0.0.1:5001/transactions/new
@app.route('/transactions/new', methods=['GET','POST'])
def new_transaction():
    values = request.get_json()
    value = values['Amount']
    print(value)
    response = {
        'Transaction Amount':"HI"
    }
    return "Hello IT works"

那么如何在上述 jquery 中设置“数据”字段以从客户端（在http://127.0.0.1:8001上运行）从端点“/new/transaction”读取数据到服务器（在http上运行://127.0.0.1:5001/transactions/new )?

是否有人可以提供帮助？

谢谢

标签： javascripthtmljquerypython-3.xflask

Answer 1

以下

<script>
        function send_response_to_other_url(data) {
           // here comes code that uses $.ajax and POST to another URL
        }
        $(function() {
           $("#generate_transaction").click(function(){
                $.ajax({
                    url:"/new/transaction",
                    type:"POST",
                    dataType: 'json',
                    headers: {'Access-Control-Allow-Origin': '*'},
                    data:$('#transaction_form').serialize(),

                    success: function(response){
                       //setting the Amount field empty
                       document.getElementById('Amount').value = ''
                       //we assume that 'response' contains the data 
                       // you want to send to another url - right?
                       send_response_to_other_url(response)
                        


                    },
                    error: function(error){

                        console.log(error);
                    }
                });

           });

           });

    </script>