Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Вывод переменных в контейнер. (https://javascript.ru/forum/jquery/47079-vyvod-peremennykh-v-kontejjner.html)

nechotack 07.05.2014 21:06

Вывод переменных, полученных get-запросом
 
Здравствуйте. Возникла необходимость написать скрипт, который должен забирать все изображения с поста вконтакте get-запросом и вставлять их в контейнер на сайте. Мною был написан скрипт, который забирает все картинки, но вот проблема с выводом. В контейнер выводит только первое изображение. Пробовал сделать все через функцию .each, вставлял её где только можно, но безрезультатно.
Вот собственно код скрипта:

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
jQuery.ajax = (function(_ajax){
var protocol = location.protocol,
hostname = location.hostname,
exRegex = RegExp(protocol + '//' + hostname),
YQL = 'http' + (/^https/.test(protocol)?'s':'') + '://query.yahooapis.com/v1/public/yql?callback=?',
query = 'select * from html where url="{URL}" and xpath="*"';
function isExternal(url) {
return !exRegex.test(url) && /:\/\//.test(url);
}
return function(o) {
var url = o.url;
if ( /get/i.test(o.type) && !/json/i.test(o.dataType) && isExternal(url) ) {
o.url = YQL;
o.dataType = 'json';
o.data = {
q: query.replace(
'{URL}',
url + (o.data ?
(/\?/.test(url) ? '&' : '?') + jQuery.param(o.data)
: '')
),
format: 'xml'
};
if (!o.success && o.complete) {
o.success = o.complete;
delete o.complete;
}
o.success = (function(_success){
return function(data) {
if (_success) {
_success.call(this, {
responseText: (data.results[0] || '')
.replace(/<script[^>]+?\/>|<script(.|\s)*?\/script>/gi, '')
}, 'success');
}
};
})(o.success);
}
return _ajax.apply(this, arguments);
};
})(jQuery.ajax);
</script>


<script type="text/javascript">
$(document).ready(function() {
$.get("http://vk.com/wall-52495835_25216", function(res) {
var mplink=$(res.responseText);
var mp = mplink.find('img').attr("src");
$("#images").html("<img src="+mp+">"+"src");
});
});
</script>


<style>
img{
height: 100px;
}
#test {
background:#f00;
}
</style>

</head>
<body>
<div id="images">
</div>
</body>
</html>


Первый скрипт позволяет cделать кросс-доменный get-запрос (ссылка на github): https://github.com/padolsey/jquery.f...ss-domain-ajax

Второй скрипт, написанный мною. Собственно в нем и проблема. Задача, по идее, из легких, но я никак не могу с ней справиться, так как раньше максимум, что я делал с помощью js это выплывающее меню. Надеюсь, Вы поможете мне разобраться. Спасибо.

krasovsky 08.05.2014 08:18

var mp = mplink.find('img').attr("src");// ты берешь коллекцию имгов , и пытаешься тут же получить src, логично что получаешь src только первого имга в коллекции
$("#images").html("<img src="+mp+">"+"src");//и вот ты тут вставляешь свой имг с этим src, наивно пологая что этот код вставит несколько имгов.Тут как бэ нужно как минимум цикл организовать

var mp = mplink.find('img'):
mp.each(function(){
$("#images").append($('<img>',{src:this.src}))
})

Как то так.

nechotack 11.05.2014 20:01

Цитата:

Сообщение от krasovsky (Сообщение 310842)
var mp = mplink.find('img').attr("src");// ты берешь коллекцию имгов , и пытаешься тут же получить src, логично что получаешь src только первого имга в коллекции
$("#images").html("<img src="+mp+">"+"src");//и вот ты тут вставляешь свой имг с этим src, наивно пологая что этот код вставит несколько имгов.Тут как бэ нужно как минимум цикл организовать

var mp = mplink.find('img'):
mp.each(function(){
$("#images").append($('<img>',{src:this.src}))
})

Как то так.

Спасибо, krakovsky! Действительно хороший ответ!

nechotack 14.05.2014 21:09

Не понимаю, почему данный код не работает с атрибутом value тега input? Если не сложно, подскажите.

<script type="text/javascript">
$(document).ready(function() {
$.get("http://vk.com/wall-1980_277410", function(res) {
var mplink=$(res.responseText);
var mp = mplink.find('input');
mp.each(function(){
$("#images").append($('<input>',{value:this.value}))
});
});
});
  </script>

krasovsky 15.05.2014 13:16

А что не работает?? Какая ошибка?? Что в консоли?

nechotack 17.05.2014 11:13

В консоль никаких ошибок не выводит. Просто в контейнер "#images" ничего не вставляется. Пробовал вывести другой атрибут (id) тега input, еще игрался с другими тегами - тот же результат. Ничего не понимаю, ведь даже при пустом атрибуте в контейнер должно выводиться "[object Object]". Разве скрипту есть разница с какими элементами работать?

depp 17.05.2014 11:31

скрипту есть разница на какой домен обращаться. вам нужно использовать кроссдоменный запрос. ajax со статусом crossDomain: true, и изучить api вконтакта для получения нужных данных.

nechotack 18.05.2014 02:06

https://github.com/padolsey/jquery.f...ss-domain-ajax
Этот скрипт позволяет сделать кроссдоменный get-запрос.

В случае с вк скрипт krakovsky работает только с тегом <img>. Кстати, с яндексом даже <img> вернуть не получилось. С google.com же возвращаются все данные. Скорее всего разработчики исключают возможность парсинга данных с их ресурсов. Так что, да, без вк api здесь никак.


Часовой пояс GMT +3, время: 23:49.