代码之家 › 专栏 › 技术社区 › 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');

推荐文章

James Williams · 如何在单击按钮时刷新div内容

2 年前

Atif Rizwan · 调用节点。使用AJAX的独立HTML文件的js API

2 年前

Mehmet · javascript执行了多个

2 年前

Shijil · 尝试在Jquery PHP搜索代码中添加选择标记功能

2 年前

Parker · 如何使表格行的单元格项加粗n秒?

2 年前

Chris J. · ajax获取查找数据属性值的请求

2 年前

GauravSolo · 在columndef datatable jquery中使用响应数据

2 年前

Hassaan Iqbal · 点击按钮打开网站,无需重新加载整个页面(AJAX)

2 年前

estudiante · 如何调用在tensorflow中运行的模型,该模型由ajax中的docker提供服务?

2 年前

Pedro F · Ajax调用后脚本运行不正常

2 年前