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

Question

我有一个Java Web服务，它向我返回了json对象的列表。 在我的用户界面中，我想使用该数据。 为此，这就是我在做什么。

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”是您在元素上提供数据的“键”。 数据方法通过将数据与使用键指定的元素相关联来存储数据（对象，json，字符串等）。 因此，“ svc-data”就是我所说的引用，因为它是来自您的服务的数据（svc =服务于我）。 如果您保存JSON数据（即list.sub.item），则您仍可以在检索时以JSON的形式访问它，因为jQuery将您提供的对象存储为相同类型-不使用序列化。

第二部分显示了如何检索与元素关联的数据。 当您使用$（'selector'）。data（'key'）进行检索（参见上文）时，数据将以您保存的类型返回，并且可以这样使用。 对于JSON，您可以检索一个JSON对象，并且仍然可以按原样使用它（即：list.sub.item），就像我尝试在警报中显示的那样。

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

Update2：小提琴中的示例让您了解我的意思： http : //jsfiddle.net/zYdRH/

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

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

如果您的JSON数据对于每个按钮而言都是唯一的，那么data（）方法就是您的最佳选择。 但是，如果这是同样JSON每个但每个元素都有它自己的一片它所需要的数据，实例VAR是要走的路。