使用HTML5数据属性的AJAX响应 [英] AJAX response using HTML5 data attribute

问题描述

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

例如，AJAX响应有两个（或n个）对象：

  0：对象
 id：111
名称：abc
 1：Object 
 id：112
名称：xyz
  

然后，已经有两个（或n个）包含用户类和HTML5 数据用户的div（包含 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> 
  

我目前正在做的工作是使用jQuery find （见下面的代码），但现在我建议使用HTML5 data - .. 属性来应答。我无法绕过它，如果有人可以帮助它。

  $。ajax（{
类型：'GET'，
 url：'/ url / goes / here'，
 dataType：json，
成功：函数（数据）{
 $（'。用户'）。each（function（key，value）{//我需要在这里删除.user和使用数据用户（如果可能的话）
 $（value）.find（'。userid'）。text data [key] .id）; //我需要使用数据attr而不是find 
 $（value）.find（'。usernm'）.text（data [key] .name）; //我需要使用数据attr而不是查找
}）; 
} 
}）; 
  

解决方案

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

  $（＃id）.data（'userId'）; 
  

或

  $（＃标识）.attr（ '数据用户id'）; 
  

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

  $（＃id）.data（'userId'，'value'）; 
  

或

  $（＃id）.attr（'data-userId'，'value'）; 
  

I've a working env where I'm using AJAX response to fill in HTML elements.

for example AJAX response has two(or n) objects like this:

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

Then, There already would be two(or n) divs with user class and HTML5 data-user containing the 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>

What I need is put those response values in this divs like this:

<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>

What I'm currently doing (and is working) is using jQuery find (see below code) but now I'm suggested to put the responses using HTML5 data-.. attribute. I can't get around it, if someone can help up with it..

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

解决方案

Data attributes are accessed by:

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

or

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

and to set a value in that data attribute:

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

or

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

这篇关于使用HTML5数据属性的AJAX响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！