Question

我有一个java web服务，它返回一个json对象列表给我。在我的UI中，我想使用该数据。为此，我正在做的事情。

function loadList(){
  $.get("myservice",function(data){
  alert(data.list[2].key1);
}

我的html中有一个元素，为此我设置了一些onmouseover事件。但为此，我希望使用这些数据。现在，因为我不确定何时会发生这种情况，并且我不知道如何使用我从Web服务获得的data，以便在此函数之外使用。我想把数据复制到另一个临时变量，但是我的json结果的大小有时会很大。

另外，当我玩鼠标悬停等时，我将使用D3JS进行数据元素操作。

那么，有没有办法使用我从Web服务获得的数据，这个get方法之外的某个地方？感谢。

Answer 1

如果它仅在元素上，则使用“data（）”方法将数据存储在元素上：

function loadList(){
    $.get("myservice",function(data){
        $('.myElement').data('svc-data',data);
    }
}

然后，当您在鼠标悬停时需要它时，只需使用相同的数据方法检索它：

$('.myelement').on('mouseover',function() {
    var data = $(this).data('svc-data');
    alert(data.list[2].key1);
});

数据文档：http://api.jquery.com/category/miscellaneous/data-storage/

更新：进一步澄清

'svc-data'是您在元素上提供数据的“关键字”。 data方法通过将数据与使用键引用的元素相关联来存储数据（对象，json，字符串等）。所以，'svc-data'就是我所说的那个引用，因为它是来自你服务的数据（svc = service to me）。如果您保存JSON数据（即：list.sub.item），则在检索它时仍然可以将其作为JSON访问，因为jQuery将您提供的对象存储为相同类型 - 不使用序列化。

第二部分展示了如何检索与元素关联的数据。当您使用$（'selector'）。data（'key'）（见上文）检索时，数据会以您保存的类型返回，并可以这样使用。在JSON的情况下，您检索一个JSON对象，并且仍然可以使用它（即：list.sub.item），因为我试图用警报显示。

关键是数据与选择器指定的元素相关联，因此您只能通过首先引用要从中检索数据的元素来检索数据。同时，你可以拥有5个带有'svc-data'的元素，你不必担心冲突。

更新2：小提琴示例，让您了解我的意思：http://jsfiddle.net/zYdRH/

Update3：添加的另一个示例是实例变量。 http://jsfiddle.net/zYdRH/3/

注意一切都包含在一个匿名的自执行函数中。这是将变量和函数保留在全局范围之外的好方法。这意味着此功能中的每个项目只能由此功能访问。我不能从另一个元素调用任何这些函数，也不能访问变量。因此，您还可以将JSON数据存储在此范围内，以便从此范围内的任何元素进行访问。我添加的最新示例有一个名为 instanced 的特定示例，但所有 json vars 都可以使用相同的方式 - 这对于一个示例来说更为明显。但是，请注意 instanced 是一个未存储到任何内容的JSON对象。它的范围是全球性的。双击按钮，查看每个按钮，显示相关单词。

如果您的JSON数据对每个按钮都是唯一的，那么 data（）方法就是您的选择。但是，如果每个元素都有相同的JSON，但每个元素都有自己需要的数据 piece ，那么实例var就是最佳选择。

使用jquery在UI中使用来自WebService的数据

1 个答案: