Как получить.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, если я не ошибаюсь.