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>

在＆＃39; removeButton＆＃39;单击我想删除给定的表行（它们将在之后动态创建）。我想用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，但我只得到一个空字符串。我在DELETE请求中尝试了request.form，这给了我ImmutableMultiDict（[]）。有小费吗？我目前正在使用Flask作为Web框架。谢谢！

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

中提供

在按钮单击上从数据库中删除表行

1 个答案: