2014-10-08 57 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

相關問題