遍历表单以通过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％}

希望有帮助，祝您好运！