Перейти к содержимому


Ads
Фотография
- - - - -

получение списка населённых пунктов через vk api

vk api ajax jquery ui

  • Авторизуйтесь для ответа в теме
Сообщений в теме: 2

#1 Sergey Kalinin

Sergey Kalinin

    Ампиратор

  • Почетный житель
  • PipPipPipPip
  • 2 925 сообщений

Отправлено 11.11.2017, 16:57

ребята, подскажите пожалуйста, если кто в курсе, почему скрипт не получает список населённых пунктов для известной страны и известного региона через vkontakte api

 

сначала покажу, что на тестовой странице документации запрос отрабатывает без проблем: 

dI2B.png

 

теперь мой код(на живую страничку типа jsfiddle ссылку не размещаю потому что всё равно она не будет работать из-за запрета на кроссдоменные запросы). 

js:

$( document ).ready(function() {
	getCountries();

	var countriesArr = [],
			countriesObj = {};
	var regionsArr = [],
			regionsObj = {};	
	var citiesArr = [],
			citiesObj = {};						

	$('#region').attr('disabled', 'disabled');
	$('#city').attr('disabled', 'disabled');

	function getCountries() {
		$.ajax({
	    url: "http://api.vk.com/method/database.getCountries?v=5.69",
	    dataType: "jsonp",
	    success: function( data ) {
				var countriesRaw = data['response']['items'];
			  console.log( countriesRaw );

			  countriesArr = countriesRaw.map(function(country) {
			  	return country.title;
			  });
			  console.log(countriesArr);

			  countriesRaw.forEach(function(country) {
			  	countriesObj[country.title] = country.id;
			  });
			  console.log(countriesObj);

				document.getElementById('countryOuter').style.display = 'block';
			  
				$( "#country" ).autocomplete({
					delay: 0.5,
					source: countriesArr,
					select: function(event, ui) {
						$('#country').attr('disabled', 'disabled');
						$('#region').removeAttr('disabled');					
	          console.log(event, countriesObj[ui.item.label]);
	          getRegions(countriesObj[ui.item.label]);
		      }
				});	
	    }		    
		});
	};

	function getRegions(countryId) {
		$.ajax({
	    url: "http://api.vk.com/method/database.getRegions?v=5.5&country_id=" + countryId,
	    dataType: "jsonp",
	    success: function( data ) {
				var regionsRaw = data['response']['items'];
			  console.log( regionsRaw );

			  regionsArr = regionsRaw.map(function(region) {
			  	return region.title;
			  });
			  console.log(regionsArr);

			  regionsRaw.forEach(function(region) {
			  	regionsObj[region.title] = region.id;
			  });
			  console.log(regionsObj);

			  console.log('____countryId', countryId);

				$( "#region" ).autocomplete({
					delay: 0.5,
					source: regionsArr,
					select: function(event, ui) {
						$('#region').attr('disabled', 'disabled');
						$('#city').removeAttr('disabled');					
	          console.log(event, ui);
	          getCities(countryId, regionsObj[ui.item.label]);
		      }
				});		
			}		    	
	  })	
	};

	function getCities(countryId, regionId) {
		$.ajax({
	    url: "http://api.vk.com/method/database.getCities?v=5.5&country_id=" + countryId + "&region_id" + regionId,
	    dataType: "jsonp",
	    success: function( data ) {
				var citiesRaw = data['response']['items'];
			  console.log( citiesRaw );

			  citiesArr = citiesRaw.map(function(city) {
			  	return city.title;
			  });
			  console.log(citiesArr);

			  citiesRaw.forEach(function(city) {
			  	citiesObj[city.title] = city.id;
			  });
			  console.log(citiesObj);

				$( "#city" ).autocomplete({
					delay: 0.5,
					source: citiesArr,
					select: function(event, ui) {
						$('#city').attr('disabled', 'disabled');
	          console.log(event, ui);
	          alert('Код страны' + countryId + ', Код региона' + regionId + ', Код города' + citiesObj[ui.item.label]);
		      }
				});	
	    }		    
		});
	};	
}); 

html:

<!DOCTYPE html>

<html lang=ru>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<script src="https://code.jquery.com/jquery-3.2.1.min.js"
					  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
					  crossorigin="anonymous"></script>

		<link href="ui/jquery-ui.min.css" rel="stylesheet">
		<link href="ui/jquery-ui.structure.min.css" rel="stylesheet">
		<link href="ui/jquery-ui.theme.min.css" rel="stylesheet">
		<script src="ui/jquery-ui.min.js"></script>

		<link href="css/styles.css" rel="stylesheet">
		<script src="js/scripts.js"></script>
	</head>
	
	<body>
		<div class="outer" id="countryOuter">
			<input id="country" placeholder="Страна">
		</div>	

		<div class="outer" id="regionOuter">
			<input id="region" placeholder="Регион">
		</div>

		<div class="outer" id="cityOuter">
			<input id="city" placeholder="Город">
		</div>						
	</body>
</html>

вывод в консоль показывает вот что:

dI9f.png

видно, что это список населённых пунктов не мордовии

 

UPD: в коде для упрощения заменил запросы на ajax-JSONP


Сообщение отредактировал Sergey Kalinin: 11.11.2017, 18:07

Изображение

#2 potapko

potapko

    Старожил

  • Житель
  • 323 сообщений

Отправлено 11.11.2017, 21:17

https://image.prntsc...TGR_kIsgv2A.png
https://image.prntsc...Re8GUkTgz8A.png

#3 Sergey Kalinin

Sergey Kalinin

    Ампиратор

  • Почетный житель
  • PipPipPipPip
  • 2 925 сообщений

Отправлено 11.11.2017, 21:27

блин точноwall.gif


Изображение




Количество пользователей, читающих эту тему: 1

0 пользователей, 1 гостей, 0 скрытых пользователей