Удаление строки таблицы из БД на кнопку мыши

Question

У меня есть таблица:

<table class="table" id="mytable"> 
    <tr> 
    <td>Column 1</td> 
    <td>Column 2</td> 
    <td><button type="submit" class="btn removeButton">Remove</button></td> 
    </tr> 
</table> 

На «removeButton» нажмите Я хочу, чтобы удалить данную строку таблицы (они будут динамически создаваемые впоследствии) , Я хочу отправить данные из этой конкретной строки с помощью ajax, чтобы я мог удалить ее из базы данных. Мне удалось реализовать удаление строки с веб-сайта, но я отлаживаю отправку соответствующего запроса и извлечение данных из запроса, чтобы удалить его из базы данных.

Мой Javascript код:

$(document).ready(function() { 
$('#mytable').on('click', '.removeButton', function(events){ 
    var data_array = $('td').map(function(){ 
     return $(this).serializeArray(); 
    }); 
    $(this).closest('tr').remove(); 
    $.ajax({ 
     type: "DELETE", 
     data: data_array, 
     success:function(result){ 
      window.location.href = $SCRIPT_ROOT + '/main'; 
     } 
    }); 
    }); 
}); 

стороне сервера код:

@app.route('/main', methods=['GET', 'POST', 'DELETE']) 
def main(): 
    if request.method == 'POST': 
    insert_in_db(request.form) 
    return redirect(url_for('next_page')) 

    elif request.method == 'DELETE': 
    #Retrieve data from the request and remove it from the database 

    return render_template('next_page.html') 

Как я могу отправить данные из текущей строки таблицы (один рядом с которой была нажата кнопка) в запрос ajax и как я могу получить его на стороне сервера после этого? Я попытался вызвать request.data, но я получаю только пустую строку. Я попробовал request.form в запросе DELETE, и это дает мне ImmutableMultiDict ([]). Какие-нибудь советы? В настоящее время я использую Flask в качестве веб-фреймворка. Благодаря!

Answer 1

Для отправки данных строк с помощью вызова AJAX -

$('#mytable').on('click', '.removeButton', function(events){ 
    var col1 = $(this).closest('tr').find('td').eq(0).html(); // or you could loop through the cells 
    var col2 = $(this).closest('tr').find('td').eq(1).html(); 
    $(this).closest('tr').remove(); 
    $.ajax({ 
     type: "DELETE", 
     data: {column1 : col1, column2 : col2}, // post values 
     success:function(result){ 
      window.location.href = $SCRIPT_ROOT + '/main'; 
     } 
    }); 
    }); 

Они должны быть доступны в request.args