javascript - 3 秒后刷新对 Controller 的 JavaScript 和 Ajax 调用，无需在 MVC 4 中的 Razor View 中进行任何单击

Question

Controller 操作:

public ActionResult googlemap()
    {
        return View();
    }

它将调用 googlemap.cshtml View 。
所以 Ajax 调用和 JavaScript 代码在 googlemap.cshtml 中查看:

@{
    ViewBag.Title = "Google Map";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCM7G5ruvunb0K7qxm6jb1TssJUwROqs-g" type="text/javascript"></script>

<script type="text/javascript">
        var myMarkers = [];
        window.onload = function () {
            $.ajax({
                async: false,
                type: "POST",
                dataType: "json",
                url: '@Url.Action("googlemapfindlatlon", "Home")',
                data: '{}',
                success: function (data) {
                    $.each(data, function (i, v) {
                        myMarkers.push(v);
                    });
                    var mapOptions = {
                        center: new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude),
                        zoom: 10,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    //alert(myMarkers[0].Latitude)
                    //alert(myMarkers[0].Langitude)
                    var infoWindow = new google.maps.InfoWindow();
                    var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
                    var lat_lng = new Array();
                    var latlngbounds = new google.maps.LatLngBounds();
                    for (i = 0; i < myMarkers.length; i++) {
                        var data = myMarkers[i]
                        var myLatlng = new google.maps.LatLng(data.Latitude, data.Langitude);
                        lat_lng.push(myLatlng);
                        var marker = new google.maps.Marker({
                            position: myLatlng,
                            map: map,
                            title: data.title
                        });
                        latlngbounds.extend(marker.position);
                        (function (marker, data) {
                            google.maps.event.addListener(marker, "click", function (e) {
                                infoWindow.setContent(data.Address);
                                infoWindow.open(map, marker);
                            });
                        })(marker, data);
                    }
                    //map.setCenter(latlngbounds.getCenter());
                    //map.fitBounds(latlngbounds);
                }

            });

            //init google map

        }
</script>

<div id="map_canvas" style="border-top: none; width: 100%; margin-top: -1px;
 height: 250px; background-color: #FAFAFA; margin-top: 0px;">
</div>

Controller 中的操作:

 public JsonResult googlemapfindlatlon()
    {

        Models.Vehicle_Tracking_SystemEntities entities = new Vehicle_Tracking_SystemEntities();
        var latlon = entities.LatLangs.ToList();
        //var latlon = entities.LatLangs.OrderByDescending(x => x.Id).Take(1).ToList();
        return Json(latlon, JsonRequestBehavior.AllowGet);
    }

因此，我希望每 3 秒自动对 Controller 中的 JsonResult 操作重复执行一次 Ajax 调用，并且 Controller 获取最新值并将其发送回 Ajax。

Answer 1

var myMarkers = [];
window.onload = function () {
    DisplayMap();
}

function DisplayMap() {
    $.ajax({
        async: false,
        type: "POST",
        dataType: "json",
        url: '@Url.Action("googlemapfindlatlon", "Home")',
        data: '{}',
        success: function (data) {
            $.each(data, function (i, v) {
                myMarkers.push(v);
            });
            var mapOptions = {
                center: new google.maps.LatLng(myMarkers[0].Latitude, myMarkers[0].Langitude),
                zoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            //alert(myMarkers[0].Latitude)
            //alert(myMarkers[0].Langitude)
            var infoWindow = new google.maps.InfoWindow();
            var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
            var lat_lng = new Array();
            var latlngbounds = new google.maps.LatLngBounds();
            for (i = 0; i < myMarkers.length; i++) {
                var data = myMarkers[i]
                var myLatlng = new google.maps.LatLng(data.Latitude, data.Langitude);
                lat_lng.push(myLatlng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                latlngbounds.extend(marker.position);
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent(data.Address);
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
            }
            //map.setCenter(latlngbounds.getCenter());
            //map.fitBounds(latlngbounds);
        }

    });

    //init google map
}


setTimeout(function () {
    DisplayMap();
}, 3000);// JavaScript source code