如何使用 jQuery $.get(或 $.ajax)获取 .data()

How to get .data() using jQuery $.get (or $.ajax)

在我们的网站上,<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');,但它 return 做了同样的事情。

那么,如何使用 $.get return body 标签的 data-someData="someValue" 属性值?

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

<body data-stock="3">

编辑: 不重复:这个问题专门针对元素特定属性的解析。我不是在问如何使用 AJAX.

来 return 数据

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

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

你可以做的是:

  • 将数据属性移至隐藏输入 (或 )
  • 内的任何其他标签

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

还有一件事我在我的 OP 中做错了...我的 ajax 请求函数保持 returning 'undefined'。这是因为在 ajax 请求完成之前,该变量正在外部使用。所以 return val; 没有 return 任何东西,直到使用 stock 变量的脚本完成使用它。

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

所以-底线:你不能从 body 标签中 return .data(),但你可以从 .[=16= 中的其他标签中获取]

对于任何需要帮助的人,这是我的脚本(有效)...

召唤

// 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 );
    }
  });

}