Question

我有一个strut2 Web应用程序。我是ajax，JQuery和Json的新手，但我试图在我的项目中实现它们。在其中一个网页中，我以表格格式显示记录，最后一列包含如下所示的图像。我已经为最后一列放置了一个带有图像的锚标记，该标记具有一些ID作为参数的动作调用。

现在代码::

var detectorOptions: [NSObject : AnyObject] = [
    CIDetectorAccuracy : CIDetectorAccuracyLow
]
self.faceDetector = CIDetector.detectorOfType(CIDetectorTypeFace, context: nil, options: detectorOptions)

现在我想将此转换为ajax调用，如下所示。这是实现行动的正确方法

 <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调用，我应该从锚中删除 HREF 。这样做会禁用我的垃圾桶图像的可点击操作。另外，在对图像执行点击操作时，如何将表格中每行独有的incomeID参数传递给ajax函数？

有人可以建议我如何实现这一目标吗？除了上面的要求，我想刷新表条目而不刷新页面。（刷新的表不应该有删除的行）。

更新：

我已经在调试模式下运行了应用程序，并且incomeID正在获得＆＃39; 0＆＃39;这是错误的

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
        }
    });
});

从表行中获取数据并将其作为参数添加到ajax调用中的URL

3 个答案: