從表行中獲取數據並將其作為參數添加到ajax調用中的URL

Question

我有一個strut2 Web應用程序。 我是ajax，JQuery和Json的新手，但嘗試在我的項目中實現它們。 在一個網頁中，我以表格格式顯示記錄，最后一列包含一個圖像，如下所示。 我在最后一列放置了一個帶有圖像的錨標記，該標記具有將某些ID作為參數的操作調用。

當前代碼：

 <a class="deleteUserIncomesJson" style="text-decoration: none" href="<tags:url action="deleteUserIncomesJson">
        <tags:param name="incomeID" value="%{incomeID}"/></tags:url>">
    <img width="20px" height="20px" src="<tags:url value="/image/Trash.png"/>" height="15"/>
</a>

現在，我想將其轉換為如下所示的ajax調用。 這是采取行動的正確方法嗎

 $(".deleteUserIncomesJson").click(function(){

    $.ajax({
        url: "deleteUserIncomesJson",
        data: {incomeID:incomeID},
        type: "POST",
        success: function(result)
                {
                    alert('record Deleted');
                    //code to repopulate the entire table
                }
        });
   });

如果我編寫了ajax調用，則應從錨中刪除HREF 。 這樣做會禁用我的垃圾桶圖像的可點擊操作。 在對圖像執行點擊操作時，如何將我對表的每一行唯一的收入ID參數傳遞給Ajax函數？

有人可以建議我如何實現這一目標嗎？ 除了上述要求外，我還想刷新表條目而不刷新頁面。（刷新的表不應具有已刪除的行）。

更新：

我已在調試模式下運行該應用程序，並且IncomeID變為“ 0”，這是錯誤的

Answer 1

您可以使用自定義data-*前綴屬性來存儲與元素相關的incomeID 。 這可以是使用以后取出.data()中即當前元素上下文this上下文

的HTML

<a  class="deleteUserIncomesJson" 
    href="#" 
    data-incomeid="<tags:param name="incomeID" value="%{incomeID}"/>">
    <img width="20px" height="20px" src="<tags:url value="/image/Trash.png"/>" height="15"/>
</a>

腳本

$(".deleteUserIncomesJson").click(function(event){
    event.preventDefault(); //Prevent default action
    var incomeid = $(this).data('incomeid'); //Fetch income id
    $.ajax({
        url: "deleteUserIncomesJson",
        data: {incomeID:incomeid},
        type: "POST",
        success: function(result)
        {
            alert('record Deleted');
            //code to repopulate the entire table
        }
    });
});

注意：語法可能不正確data-incomeid="<tags:param name="incomeID" value="%{incomeID}"/>

Answer 2

你可以試試看嗎？

$(".deleteUserIncomesJson").click(function(e){
e.preventDefault();
var incomeid = $(this).parent().parent().find("td:eq(0)").text(); //Fetch income id
$.ajax({
    url: "deleteUserIncomesJson",
    data: {"incomeID":incomeid},
    type: "POST",
    success: function(result)
    {
        alert('record Deleted');
        //code to repopulate the entire table
    }
});

}）;

要刷新頁面，您可以清除表內容並重新填充新數據。 您可以為此創建函數。

Answer 3

謝謝大家的意見和建議。 完成這些修改后，現在工作正常。 我不確定這種方法是正確還是錯誤，但是在沒有任何問題的情況下效果很好。 我仍在嘗試通過刷新整個頁面來找出要刷新表數據的部分。

HTML代碼：

 <a  class="deleteUserIncomesJson" href="#" id="{<tags:property value="incomeID"/>}" data="<tags:property value="incomeID"/>">
    <img width="20px" height="20px" src="<tags:url value="/image/Trash.png"/>" height="15"/>
 </a>

腳本：

$(".deleteUserIncomesJson").click(function(e){
    e.preventDefault();
    var tempID = $(this).attr('data'); //Fetch income id        
    $.ajax({
        url: "deleteUserIncomesJson",
        data: {incomeID:tempID},
        type: "get",
        success: function(result)
        {
            alert('record Deleted');
            //code to repopulate the entire table
        }
    });
});