自动刷新javascript而不加载整个页面

Question

我正在使用highcharts和leaflet，我希望我的脚本每10秒刷新一次，而不是刷新整个页面。我已经用我的highcharts php文件成功地做到了这一点，但是当我用我的leaflet脚本执行同样的操作时，什么也没有发生，地图也不会出现。我认为问题出在函数的使用上，但为什么它适用于highcharts而不是leaflet。

以下是highcharts php文件代码

<div id="nb_tweets" style="width:100%; height:400px;"></div>

<script>

    $(function myFunction() 
    {
        <?php include 'import_nb_tweets.php'; ?>
        <?php include 'import_nb_users.php'; ?>

        $('#nb_tweets').highcharts(
        {
            chart: 
            {
                type: 'line'
            },
            title: 
            {
                text: 'Number of tweets trend'
            },
            xAxis: 
            {
                categories: x_axis
            },
            yAxis: 
            {
                title: 
                {
                    text: 'Number of tweets'
                }
            },
            series: 
            [
                {
                    name: 'Precise geolocation',
                    data: nb_precise
                }
                , 
                {
                    name: 'Associated geolocation',
                    data: nb_associated
                }, 
                {
                    name: 'All tweets',
                    data: nb_total
                }
            ]
        });

        setTimeout(myFunction, 10000);

    });

</script>

下面是leaflet php文件的代码

​

<div id="map" style="width: 1300px; height: 650px"></div>
    		
<script>
    		
    $(function myFunction() {
       
        // Inclusion of database variables
        
            <?php include 'importDB_heat.php'; ?>
            <?php include 'importDB2.php'; ?>
            <?php include 'importDB3.php'; ?>

            
        // Definition of the map variable and the default parameters
        
            var map = new L.map('map', {fullscreenControl: true, fullscreenControlOptions: {position: 'topleft'}}).setView([53.350596, -6.303142], 14);
        
            mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
            
            L.tileLayer
            (
                'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 
                {
                    attribution: '&copy; ' + mapLink + ' Contributors',
                    maxZoom: 18,
                }
            ).addTo(map);
            
        
        // Definition of separate layers for markers and heat map and for precise and associated geolocation
        
            var heat_layer_place = new L.LayerGroup();
            var heat_layer_precise = new L.LayerGroup();
            
            var precise_layer = new L.LayerGroup();
            var associated_layer = new L.LayerGroup();
        
        
        // Insertion (and defintion) of cluster groups in the markers layers
        
            var markers_precise = new L.MarkerClusterGroup();
            markers_precise.addTo(precise_layer);
            
            var markers_associated = new L.MarkerClusterGroup();
            markers_associated.addTo(associated_layer);
        
        
        // Loading (and definition) of different icons for every marker layer - 
        
            var blueBird = L.icon({iconUrl: 'twitter_logo_blue.png', iconSize:[45,45], iconAnchor:[23,23], popupAnchor:[0,-19]});
            var redBird = L.icon({iconUrl: 'twitter_logo_red.png', iconSize:[40,40], iconAnchor:[23,23], popupAnchor:[0,-19]});
            
        
        // Insertion of heat layers on the map
        
            var heat_place = L.heatLayer(quakePoints_place,{radius: <?php include 'par_map_rad.php'; ?>, blur: <?php include 'par_map_blur.php'; ?>, maxZoom: <?php include 'par_map_maxzoom.php'; ?>, }).addTo(map).addTo(heat_layer_place);
            var heat_precise = L.heatLayer(quakePoints_precise,{radius: <?php include 'par_map_rad.php'; ?>, blur: <?php include 'par_map_blur.php'; ?>, maxZoom: <?php include 'par_map_maxzoom.php'; ?>, }).addTo(map).addTo(heat_layer_precise);
        
        
        // Implementation (and insertion) of markers layers on the map
        
            var nb_points = tweet_position.length;
            
            for (var iter = 0; iter < nb_points; iter++) 
            {
                markers_precise.addLayer(L.marker(tweet_position[iter],{title: tile_precise[iter], opacity: <?php include 'par_map_precise_op.php'; ?>, icon: blueBird}).bindPopup(texte_precise[iter]));
            }
            
            var nb_points_bis = tweet_place.length;
            
            for (var iter = 0; iter < nb_points_bis; iter++) 
            {
                markers_associated.addLayer(L.marker(tweet_place[iter],{title: tile_place[iter], opacity: <?php include 'par_map_associated_op.php'; ?>, icon: redBird}).bindPopup(texte_place[iter]));
            }
            
            map.addLayer(markers_precise);
            map.addLayer(markers_associated);
            
        
        // Definition (and insertion) of basic optional layers for the map
        
            var osmLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
            var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
            var osmAttrib = '&copy; ' + osmLink + ' Contributors';
            var osmMap = L.tileLayer(osmUrl, {attribution: osmAttrib});
            
            var thunLink = '<a href="http://thunderforest.com/">Thunderforest</a>';
            var	landUrl = 'http://{s}.tile.thunderforest.com/landscape/{z}/{x}/{y}.png';
            var thunAttrib = '&copy; '+osmLink+' Contributors & '+thunLink;
            var landMap = L.tileLayer(landUrl, {attribution: thunAttrib});
            
            var EWI = '<a href="http://www.esri.com/">Esri</a>';
            var EWIUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
            var EWIAttrib = '&copy; '+ EWI +'i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community';
            var EWIMap = L.tileLayer(EWIUrl, {attribution: EWIAttrib});
            
            var transport = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
            var transportUrl = 'http://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png';
            var translink = '<a href="http://thunderforest.com/">Thunderforest</a>';
            var transportAttrib = '&copy; '+ transport +' Contributors & '+translink;
            var transportMap = L.tileLayer(transportUrl, {attribution: transportAttrib});
        
            var baseLayers = {"OSM Mapnik": osmMap,"Landscape": landMap, "Esri World Imagery": EWIMap, "Transport": transportMap};
            var overlays = {"Tweet location: precise geolocation": precise_layer, "Tweet location: associated geolocation": associated_layer, "Tweet density: associated geolocation": heat_layer_place, "Tweet density: precise geolocation": heat_layer_precise};
            L.control.layers(baseLayers,overlays).addTo(map);
            
            
        // Restriction of the result area of the search tool
            
            var southWest = L.latLng(<?php include 'par_dublin_lat_SW.php'; ?>, <?php include 'par_dublin_long_SW.php'; ?>);
            var	northEast = L.latLng(<?php include 'par_dublin_lat_NE.php'; ?>, <?php include 'par_dublin_long_NE.php'; ?>);
            var	boundsOSM = L.latLngBounds(southWest, northEast);
            var optionsOSM = {bounds: boundsOSM};
            
        
        // Insertion of the place search tool
        
            var osmGeocoder = new L.Control.OSMGeocoder(optionsOSM);
            map.addControl(osmGeocoder);
          
            setTimeout(myFunction, 10000);

    });
            
</script>

​

Answer 1

这就是创建AJAX/XHR请求的目的。有了它，你可以在后台获取数据，并用它更新你的highcharts/leaflet。下面是使用AJAX/XHR可以执行的操作的示例：

从一个简单的地图和一个存储标记的组开始：

var map = L.map('leaflet', {
    'center': [0, 0],
    'zoom': 0,
    'layers': [
         L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
             'attribution': 'Map data © OpenStreetMap contributors'
         })
    ]
});

var group = new L.LayerGroup().addTo(map);

使用jQuery的$.getJSON (一个用JSON数据准备XHR GET请求的函数)，您可以在后台请求数据并在当前地图中使用它。我将在注释中详细解释代码：

// Function for handling data
function handle(response) {
  // Empty the current layergroup
  group.clearLayers();
  // Loop over the newly retreived array
  response.forEach(function(value) {
    // Add new marker to the group
    group.addLayer(new L.Marker(value));
  });
}

// Function for requesting new data
function request() {
  // Fetch url and execute handle function on success
  $.getJSON('coordinates.json', handle);
}

// Immediately request new data
request();
// Request new data every ten seconds
setInterval(request, 10000);

这里有一个关于Plunker的工作示例：http://plnkr.co/edit/qasIC2?p=preview (记住，它一次又一次地请求相同的数据，因此标记位置实际上不会改变，但我添加了一些控制台消息，以便您可以验证它是否正常工作)您可以很容易地将此概念调整为您正在尝试做的事情。