代码之家 › 专栏 › 技术社区 › Enrique

jquery ajax分区

html ajax jquery

Enrique · 技术社区 · 15 年前

我有这样的联系人列表。

NameOfContact  Accept
NameOfContact2 Accept
......

其中“accept”是一个链接。当我单击“接受”时,我想用联系人的ID发送一个Ajax请求。当ajax调用返回时,它应该删除accept链接并在那里显示结果。

因此,如果我单击联系人2的“接受”按钮,结果应该是:

NameOfContact  Accept
NameOfContact2 Added
......

我正在使用友好的URL,例如,要接受联系人,URL是:

/action/accept/12345

其中12345是联系人ID。

我的HTML是这样的(我在服务器端动态生成HTML,结果应该是这样的):

John
    <div id="choice">
    <a id="accept" name="accept" href='/action/accept/12345'>Accept</a>
    </div>

Kate
<div id="choice">
    <a id="accept" name="accept" href='/action/accept/55555'>Accept</a>
    </div>

我的jquery是这样的:

$(document).ready(function(){
        $('#accept').click(function(e){
            e.preventDefault();
            sendAcceptRequest(e.target, e);
        });
    });
    function sendAcceptRequest(target, e){
        $.post(target,
        function(data){
           $('#choice').html(data);
        }, "html");
    }

我的问题是我不知道如何区分不同的选择。我知道我可以添加类似“choice12345”的ID,但我希望在sendapterrequest函数中获取e的父级(href的父级,即DIV元素)并将结果追加到该DIV,但我不知道如何获取e的父级并将结果追加到该DIV。有什么想法吗?

2 回复 | 直到 15 年前

D.C. 15 年前

在您的示例中,您的ID属性具有相同的值。ID必须是唯一的,因为它们应该是元素的标识。在您的案例中使用类属性。

Kate
<div id="kate" class="choice">
<a class="accept" name="accept" href='/action/accept/55555'>Accept</a>
</div>


$(document).ready(function(){
    $('.accept').click(function(e){
        e.preventDefault();
        sendAcceptRequest(e.target, e);
    });
});
function sendAcceptRequest(target, e){
    $.post(target,
    function(data){
       // this needs to be change to unique identify which element you want the html to be inserted
       $('.choice').html(data);
    }, "html");
}

Mottie 15 年前

要扩展Darren所说的:将ID更改为类后,将此选择器添加到 sendAcceptRequest 函数查找 .choice 对象将“accept”链接替换为“added”。当然,这是在这篇文章成功之后。

$('.choice a[href=' + $(target).attr('href') + ']').parent().html('Added');

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

6 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

6 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

6 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

6 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

6 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

6 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

6 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

6 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

6 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

6 月前