2014-10-08 61 views
0

我有一个表:从一个按钮一个数据库中删除表行单击

<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,但我只得到一个空字符串。我在DELETE请求中尝试了request.form,这给了我ImmutableMultiDict([])。有小费吗?我目前使用Flask作为Web框架。谢谢!

+0

可没有数组的时候'创建row'序列化。 “行”应该是什么? – 2014-10-08 21:31:46

+0

在这个例子中,我想要检索两个元素:列1和列2.所以基本上是当前行中每列的数据。 – agerrr 2014-10-08 21:36:46

+0

您将不得不创建一个数组,然后将每个值推入数组中。 – 2014-10-08 21:38:17

回答

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

+0

嗯是的,但我没有使用PHP。你知道我怎么可以用Python检索数据吗? (我正在使用烧瓶) – agerrr 2014-10-08 21:47:51

+0

对不起,我只是自动打字。我已经改变了答案。 – 2014-10-08 21:58:37

+0

我更新了代码,现在打印request.args,而不是数据我得到ImmutableMultiDict([]) – agerrr 2014-10-08 22:07:38

相关问题