Как получить.data() с помощью jQuery $.get (или $.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');, но это вернуло то же самое.

Итак, как я могу вернуть теги тела data-someData="someValue" значения атрибутов с использованием $.get?

data-stock атрибут, использованный в примере выше, выглядит следующим образом на моей странице продукта:

<body data-stock="3">

РЕДАКТИРОВАТЬ: не дубликат: этот вопрос относится конкретно к анализу конкретных атрибутов элементов. Я не спрашиваю, как просто вернуть данные, используя AJAX.

2 ответа

Решение

Итак, короткий ответ: вы не можете ссылаться на атрибуты данных внутри <body> пометить таким образом. Таким образом, вы не можете использовать var productData = $(body).data('someData');, jQuery явно не обращает внимания на тег body при использовании $.ajax- даже если возвращенные данные упоминаются как объект.

Что вы можете сделать, это:

  • Переместить атрибуты данных на скрытый ввод (или любой другой тег внутри)

После этого вы можете ссылаться на атрибуты данных в ваших запросах ajax.

Была еще одна вещь, которую я делал неправильно в моем OP... Моя функция запроса ajax продолжала возвращать 'undefined'. Это было связано с тем, что переменная использовалась извне до завершения запроса ajax. Итак return val; ничего не возвращал до тех пор, пока скрипты, которые использовали переменную stock, не были сделаны с ее использованием.

Итак, мне пришлось использовать обратный вызов и немного переделать мой сценарий, но теперь все работает нормально...

Итак, нижняя строка: вы не можете вернуть.data() из тега body, но вы можете сделать это из других тегов внутри.

Для всех, кто нуждается в некоторой помощи с этим, вот мой сценарий (который работает)...

Вызов

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

}

Позвольте мне предложить, возможно, сумасшедшую идею... Вы предоставили образец URL:var stock = getProductData('stock', '/some/product/url');Так находится ли файл в одном домене? Если так, как насчет загрузки его в скрытый iframe и последующего доступа к свойству документа iframe? Это не будет работать, если контент находится в другом домене по соображениям безопасности. Если это тот же домен, то window.frames["framename"].document даст вам содержимое IFrame, если я не ошибаюсь.

Другие вопросы по тегам