使用 HTML5 数据属性的 AJAX 响应

2024-01-10

我有一个工作环境,我使用 AJAX 响应来填充 HTML 元素。

例如 AJAX 响应有两个(或 n 个)对象,如下所示:

0:Object
     id: "111"
     Name: "abc"
1:Object
     id: "112"
     Name: "xyz"

然后,已经有两个(或n)个divuser类和 HTML5data-user含有id in HTML

<div class='user' data-user='111'>
    <div class='userId'data-userId='111> </div>
     <div class='usernm' data-user='usernm'> </div>
</div>

<div class='user' data-user='112'>
    <div class='userId'data-userId='112> </div>
     <div class='usernm' data-user='usernm'> </div>
</div>

我需要的是将这些响应值放入这个 div 中,如下所示:

<div class='user' data-user='111'>
    <div class='userId'data-userId='111> 111 </div>
     <div class='usernm' data-user='usernm'> abc </div>
</div>
 <div class='user' data-user='112'>
    <div class='userId'data-userId='112> 112 </div>
     <div class='usernm' data-user='usernm'> xyz </div>
</div>

我目前正在做(并且正在工作)的是使用 jQueryfind(参见下面的代码)但现在建议我使用 HTML5 放置响应data-..属性。我无法解决这个问题,如果有人可以帮忙的话。

$.ajax({
    type: 'GET',
    url: '/url/goes/here',
    dataType: "json",
    success: function(data) {
       $('.user').each(function(key, value){ //i need to remove .user and use data-user here (if possible)
            $(value).find('.userid').text(data[key].id); //i need to put values using data attr instead of find
            $(value).find('.usernm').text(data[key].name); //i need to put values using data attr instead of find              
       });
    }
});

数据属性通过以下方式访问:

$(#id).data('userId');

or

$(#id).attr('data-userId');

并在该数据属性中设置一个值:

$(#id).data('userId', 'value');

or

$(#id).attr('data-userId', 'value');
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 HTML5 数据属性的 AJAX 响应 的相关文章