遍歷表單以通過jQuery / AJAX將動態數據提交到Flask

Question

我正在嘗試使用燒瓶創建一個Web應用程序，該燒瓶具有從API調用獲取的數據行。 目前，我有一個名為“票號”的列，其中包含一組數字。 我想要的功能是讓用戶單擊一個數字，並有一個模態呈現更具體的信息（通過單獨的python API調用）。 我正在使用AJAX將數據發送到我的flask應用程序，以防止單擊時刷新頁面。 唯一的問題是，無論我單擊哪個按鈕，它都認為我正在單擊列出的第一個按鈕，並為我提供第一個數字的結果。 在下面，我發布了Python，jQuery和html。 非常感謝您提供的所有幫助。

jQuery的：

$().ready(function(){
    $('button').click(function() {
        $.ajax({
            url: '/ticket',
            data: $('form').serialize(),
            type: 'POST',
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

燒瓶：

@app.route('/ticket', methods=['POST', 'GET'])
def ticket_drill():

    ticket_number = request.form['ticketNumber']

    header = {
        'authorization': "super_secret_key",
        'content-type': "application/json",
        'cache-control': "no-cache"
    }
    s = requests.get("https://my_site/v4_6_release/apis/3.0/service/tickets/" + 
    str(ticket_number), headers=header)
    ticket_details = json.loads(s.text)
    ticket_id = ticket_details['id']

    return json.dumps({'status':'OK','Ticket Number:':ticket_id});

HTML：

{% for ticket_number in service_board %}
            <tr>
                    <td>
                        <form class="form-signin" action="/serviceboard" method="post" role="form">
                            <button class="btn btn-lg btn-primary btn-block" type="button">{{ticket_number}}
                                <input type="hidden" name="ticketNumber" value="{{ticket_number}}" />
                            </button>
                        </form>
                    </td>    
    </tr>
{% endfor %}

Answer 1

我會給您的按鈕一個ID，並使用jQuery進行調用，如下所示：

$().ready(function(){
$('button#ticketNumberButton').on('click',function() {
    var ticketNumberVar = $(this).parent().find(' form ').find('#ticketNumber');

    $.ajax({
        url: '/ticket',
        data: $('form').serialize(),
        type: 'POST',
        success: function(response) {
            console.log(response);
            obj = JSON.parse(response);
            ticketNumberVar.val(obj.Ticket_Number);
        },
        error: function(error) {
            console.log(error);
        }
    });
});

}）;

也許這只是我，但我會擺脫空間和“；” 在您看來也是如此。

return json.dumps({'status':'OK','Ticket_Number:':ticket_id})

HTML：

{% for ticket_number in service_board %}
        <tr>
                <td>
                    <form class="form-signin" action="/serviceboard" method="post" role="form">
                        <input type="hidden" id="ticketNumber" name="ticketNumber" value="{{ticket_number}}" />

                    </form>
                    <button id="ticketNumberButton" class="btn btn-lg btn-primary btn-block" type="button">{{ticket_number}}</button>

                </td>    
</tr>

{％endfor％}

希望有幫助，祝您好運！