2016-07-18 5 views
0

Я пытаюсь сделать веб-приложение с PhoneGap, поэтому я использую веб-язык, такой как Javascript и HTML5 и CSS3. У меня есть API-интерфейс google, поэтому я хочу заполнить несколько координатных точек и некоторую информацию в реальном времени с веб-сайта.Javascript, ajax извлечь данные с сайта

код у меня до сих пор является следующее:

function initialize() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 12, 
    center: new google.maps.LatLng(55.940937, -3.191612), 
    // center: {lat: -28, lng: 137} 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    }); 

    function getResults(){ 
       var headers = document.getElementsByTagName('th'); 
       var data = document.getElementsByTagName('td'); 
       var results = []; 
       for(var i = 0; i < data.length; i += headers.length) { 
        var item = {}; 
        for(var j = 0; j < headers.length; j++) { 
         item[ headers[j].textContent.trim() ] = data[i + j].textContent.trim(); 
        } 
        results.push(item); 
       }; 
       return results; 
      } 
      console.log(getResults()); 
      jsonString = JSON.stringify(getResults()); 
    function callback(results, status) { 
      if(status == google.maps.places.PlaceServiceStatus.OK){ 
      for (var i = 0; i < results.length; i++){ 

      var place = results[i]; 
      console.log(place.name); 
      console.log(place.value); 
      console.log(types[0]); 
      createMarker(results[i]); 

      } 
      } 
      } 

    setInterval(function($.ajax({ 
     url: "http://edinburgh.cdmf.info/public/carparks/list.htm?callback", 
     data: getResults(), 
     type: 'GET', 
     dataType: "jsonp", 
     //add_header: Acess-Control-Allow-Origin * 
     success: function(data){ 
      //Update the script 
      script.setValue(data.value);}, 
     error: function() {alert('Failed');}, 
     beforeSend: setHeader   
     }); 
     ,30000) 
     function setHeader(xhr){ 
     xhr.setRequestHeader('Authorization', results); 
      } 
     var trafficLayer = new google.maps.TrafficLayer(); 
    trafficLayer.setMap(map); 
    } 

И в HTML

</head> 
<body onload="initialize()"> 
    <h1>Welcome to SmartParking</h1> 
<div id="map"></div> 

<iframe src="https://www.google.com/maps/d/embed?mid=198X7G-KU3xan5zrG0EtQ63Guojo" width="640" height="480"></iframe> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 

Поэтому в основном getResults() метод пошел бы веб-сайт tablesorter и извлечь информацию td в файл JSON.

Я довольно новичок в веб-технологиях и на самом деле не знаю, смогу ли я сделать это таким образом, поскольку я продолжаю иметь пустые массивы с ошибкой.

Я попытался функцию GetResuts на фактический веб-элемента инспектора консоли Console answer to getResults() и работает он дает мне обратно массив объектов со всей информацией

screenshot problem on console Chrome

ответ

0

Что вам нужно сделать, это реструктурировать код ,

Во-первых, вам нужно создать <form> элемент в вашем HTML like so.

Далее, вы должны настроить сервер. Всякий раз, когда вы вызываете API и возвращаете данные, его следует обрабатывать на сервере, а не в интерфейсе, как вы это делаете. В принципе, вы отправите данные формы на бэкэнд, бэкэнд отправит api-вызов с этими данными и вернет данные api в интерфейс.

Наконец, если вы хотите обновления в реальном времени, вы не хотите, чтобы setInterval вызывал ajax - это довольно распространенная ошибка, на самом деле, читайте об этом here. Ссылка также описывает «кометный опрос» (который использует facebook), но вы действительно должны думать о том, чтобы использовать какое-то соединение Websockets, такое как socket.io с Node.js, которое очень легко настроить.

Удачи!

Смежные вопросы