如何使用 jQuery $.get（或 $.ajax）获取 .data()答案

【问题标题】：How to get .data() using jQuery $.get (or $.ajax)如何使用 jQuery $.get（或 $.ajax）获取 .data()
【发布时间】：2015-04-17 19:00:14
【问题描述】：

在我们的网站上，<body> 标签包含各种data-*="*" 属性：

<body data-someData="someValue" data-someOtherData="someOtherValue">

我需要在其他页面上获取这些属性的值。所以，我使用 jQuery AJAX $.get 来获取页面的 HTML，从而获取这些数据属性。

我当前的脚本：

// The call (used on different pages)
var stock = getProductData('stock', '/some/product/url');

// The "GET" function
function getProductData(type, url) {
    var jqxhr = $.get(url, function( data ) {
        console.log('Data found!');
        var $body = $(data).find('body');
        var val = $body.data('stock');
        console.log('Returning Value: "' + val + '"');
        return val;
    }).done(function(){
        // Request is complete
        console.log('getProductData Finished...');
    }).fail(function(){
        console.error( 'getProductData: ' + type + ' = FAIL / URL: ' + url);
    });
}

那么，有什么问题吗？好吧，$(data).find('body').data('stock'); 将以undefined 的形式返回。我也试过$(data).find('body').attr('data-stock');，但它返回了同样的东西。

那么，如何使用$.get 返回body 标签的data-someData="someValue" 属性值？

上面示例中使用的data-stock 属性在我的产品页面上如下所示：

<body data-stock="3">

编辑： 不重复：这个问题专门指解析元素的特定属性。我不是在问如何使用 AJAX 返回数据。

【问题讨论】：

你为什么要把这些放在body？
我同意@DigitalChris，提出一个下载一堆 HTML 只是为了获得两个属性的请求是非常浪费的。为什么不创建一个单独的端点，将属性作为 JSON 返回？
How to return the response from an asynchronous call? 的可能重复项
那么，你得到Returning Value: undefined？如果是这种情况，那么您可能找不到正确的元素。 jQuery 通过构建集合去除了一些元素，body 可能就是其中之一。请注意，无论如何您都不能像这样从getProductData 返回val。
你不能像这样用 jQuery 创建一个 body 元素，即$("<body>") 返回一个空集合。您可能需要以不同的方式处理此问题。

标签： jquery ajax attributes jquery-data jquery-get

【解决方案1】：

让我提出一个疯狂的想法……您提供了一个示例网址： var stock = getProductData('stock', '/some/product/url'); 那么文件在同一个域上吗？如果是这样，如何将其加载到隐藏的 iframe 中，然后访问 iframe 的文档属性？但是，如果出于安全原因，内容在另一个域上，那将不起作用。如果是同一个域，如果我没记错的话，window.frames["framename"].document 会给你 IFrame 的内容。

【讨论】：

这样的问题是，如果用户在我们的结帐页面上，它将被呈现为“不安全”（因为此“数据”所在的产品页面是不安全的并且结帐是） .
我喜欢创意！

【解决方案2】：

好的，简短的回答是您不能以这种方式引用<body> 标记内的数据属性。因此，您无法使用var productData = $(body).data('someData');。 jQuery在使用$.ajax时显然不注意body标签——即使返回的数据被引用为对象。

你可以做的是：

将数据属性移动到隐藏的输入（或任何其他标签内）

完成此操作后，您可以在 ajax 请求中引用数据属性。

我在 OP 中做错了另一件事……我的 ajax 请求函数不断返回“未定义”。这是因为在 ajax 请求完成之前，该变量已被外部使用。因此，return val; 直到使用 stock 变量的脚本完成使用它之后才返回任何内容。

所以，我不得不使用回调并稍微修改我的脚本，但现在一切正常......

所以底线：你不能从 body 标签返回 .data()，但你可以从 .

内的其他标签返回

对于任何需要帮助的人，这是我的脚本（有效）...

召唤

// Needed for use inside AJAX request
var $el = $(this);
var url = $el.data('url');

// List Stock
getProductData('stock', url, function(val) {

  var stock = val;
  var str;
  var cls;

  if ( stock > 0 ) {
    str = stock + ' ' + 'In Stock';
    cls = 'in-stock';
  } else {
    str = 'Out of Stock';
    cls = 'out-of-stock';
  }

  $el.find('label.stock').addClass(cls).text(str);

});

AJAX 请求

// Get data from the product page
function getProductData(type, url, callBack) {

  $.ajax({
    url: url,
    method: 'GET',
    dataType: 'html',
    success: function(data){

      var $data = $(data).find('#product-data');

      var val = $data.data(type);

      return callBack( val );

    },
    error: function(data) {
      console.error( 'getProductData: ' + type + ' = FAIL / URL: ' + url );
    }
  });

}

【讨论】：