Question

在我们的网站上，<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');，但它返回了同样的东西。

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

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

<body data-stock="3">

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

Answer 1

让我建议一个疯狂的想法...你提供了一个示例网址： var stock = getProductData('stock', '/some/product/url'); 那个文件在同一个域上也是如此？如果是这样，那么将其加载到隐藏的iframe然后访问iframe的文档属性呢？如果出于安全原因内容在另一个域上，那将无法工作。如果它是同一个域名，那么如果我没有弄错的话，window.frames["framename"].document会为您提供IFrame的内容。

Answer 2

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

您可以做的是：

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

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

我的OP中还有另一件事我做错了...我的ajax请求功能一直在返回＆＃39; undefined＆＃39;。这是因为变量在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 );
    }
  });

}

如何使用jQuery $ .get（或$ .ajax）获取.data（）

2 个答案: