堆棧內存溢出
  簡體   English   中英

Ajax沒有調用成功函數

[英]Ajax is not calling success function

 原文  2018-06-20 11:54:25  0   2    javascript/ ajax/ google-maps

問題描述

我正在嘗試創建一個谷歌地圖。我編寫了一個GET類型的REST服務，該服務以json格式提供數據，我在JS中使用ajax對其進行調用。 當我在瀏覽器中點擊該REST服務時，我得到了數據，但是當我嘗試使用ajax來獲得數據時，它不起作用。 我無法理解我在這里做錯了什么。 單擊按鈕即可創建此數據的標記。

所以我試圖將REST服務輸出（json）放入變量中，代碼工作正常。 單擊按鈕即可創建標記。 但是，當我調用“ getMapData（）”以獲取數據並單擊按鈕時，在這種情況下代碼無法正常工作。 我真的無法理解第二種情況。

這里是codepan的鏈接- https://codepen.io/pinkisharma/pen/XYZGgN 

<!DOCTYPE html>
<html>

<head>
    <title>Geocoding service</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
        /* Always set the map height explicitly to define the size of the div
               * element that contains the map. */

        #map {
            height: 100%;
        }

        /* Optional: Makes the sample page fill the window. */

        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #floating-panel {
            position: absolute;
            top: 10px;
            left: 25%;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
            text-align: center;
            font-family: 'Roboto', 'sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }
    </style>
</head>
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
</script>

<body>
    <div id="floating-panel">
        <input id="address" type="textbox" value="Sydney, NSW">
        <input id="submit" type="button" value="Geocode">
    </div>
    <div id="map"></div>
    <script>
        popupJson = "";
        RoomTypeData = [{
            'roomType': 'CA'
        }, {
            'roomType': 'HGg'
        }, {
            'roomType': 'yertf'
        }, ];
        var tomcatServerIp = "localhost";
        var tomcatPort = "8180"
        //providing map options for map creation


        //for storage of markers
        markersArr = [];
        mapDatset = [{
            "sitename": "ZONA RESTRINGIDA",
            "clientname": "Interserve Spain",
            "zipcode": "7611",
            "isActive": "active",
            "latitude": "0",
            "longitude": "0",
            "activeEmp": 5,
            "activeDevices": 5,
            "siteAdress": "Palma de Mallorca,7611"
        }, {
            "sitename": "BANCA MARCH O.P",
            "clientname": "Interserve Spain",
            "zipcode": "7040",
            "isActive": "active",
            "latitude": "0",
            "longitude": "0",
            "activeEmp": 14,
            "activeDevices": 5,
            "siteAdress": "Avenida Alejandro Rosello 8,7040"
        }, {
            "sitename": "ZONA TIERRA",
            "clientname": "Interserve Spain",
            "zipcode": "7611",
            "isActive": "active",
            "latitude": "0",
            "longitude": "0",
            "activeEmp": 6,
            "activeDevices": 5,
            "siteAdress": "Palma de Mallorca,7611"
        }, {
            "sitename": "TERMINAL D Y B",
            "clientname": "Interserve Spain",
            "zipcode": "7611",
            "isActive": "active",
            "latitude": "0",
            "longitude": "0",
            "activeEmp": 4,
            "activeDevices": 5,
            "siteAdress": "Palma de Mallorca,7611"
        }, {
            "sitename": "TERMINAL A",
            "clientname": "Interserve Spain",
            "zipcode": "7611",
            "isActive": "active",
            "latitude": "0",
            "longitude": "0",
            "activeEmp": 7,
            "activeDevices": 5,
            "siteAdress": "Palma de Mallorca,7611"
        }, {
            "sitename": "TERMINAL C",
            "clientname": "Interserve Spain",
            "zipcode": "7611",
            "isActive": "active",
            "latitude": "0",
            "longitude": "0",
            "activeEmp": 4,
            "activeDevices": 5,
            "siteAdress": "Palma de Mallorca,7611"
        }, {
            "sitename": "NAVE AENA IV",
            "clientname": "Interserve Spain",
            "zipcode": "7611",
            "isActive": "inactive",
            "latitude": "0",
            "longitude": "0",
            "activeEmp": 4,
            "activeDevices": 5,
            "siteAdress": "Palma de Mallorca,7611"
        }, {
            "sitename": "BANCA MARCH SON PERETO",
            "clientname": "Interserve Spain",
            "zipcode": "7013",
            "isActive": "inactive",
            "latitude": "0",
            "longitude": "0",
            "activeEmp": 1,
            "activeDevices": 5,
            "siteAdress": "C/ Bartolome Sureda I misserol,7013"
        }];

        initMap();

        function initMap() {

            var mapOptions = {
                zoom: 2,
                cursor: 'crosshair',
                center: new google.maps.LatLng(37.428432, -122.127379),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            map = new google.maps.Map(document.getElementById('map'), mapOptions);
            var geocoder = new google.maps.Geocoder();

            document.getElementById('submit').addEventListener('click', function() {
                //     getMapData();
                for (i = 0; i < mapDatset.length; i++) {
                    geocodeAddressAndSetMarker(geocoder, map, mapDatset[i]);
                }
            });
        }


        //getMapData();
        function getMapData() {
            $.ajax({
                url: "http://127.0.0.1:8180/services/restService/GetSitesData?clientname=" + "Interserve Spain",
                type: "GET",
                async: true,
                success: function(json) {
                    mapDatset = json;
                    console.log("mapdata Json Length :" + mapDatset.length);
                    console.log("Received json :" + JSON.stringify(mapDatset));
                },
                error: function() {
                    console.log("some error occured in fetching data");
                    mapDatset = [];
                }
            });
        }

        function geocodeAddressAndSetMarker(geocoder, resultsMap, info) {

            var address = info.zipcode;
            geocoder.geocode({
                'address': address
            }, function(results, status) {
                if (status === 'OK') {
                    var loc = results[0].geometry.location;
                    map.setZoom(5);
                    resultsMap.setCenter(results[0].geometry.location);
                    var marker = new google.maps.Marker({
                        map: resultsMap,
                        position: results[0].geometry.location,
                        sitename: info.sitename,
                        //  icon: iconImage,
                        activeEmp: info.activeEmp,
                        activeDevice: info.activeDevices,
                        siteaddr: info.siteAdress,
                        isActive: info.isActive
                    });
                    var infowindow = new google.maps.InfoWindow({});
                    var iwContent = "";
                    if (marker.isActive === "active") {
                        // Creating the content to be inserted in the infowindow
                        iwContent = '<div id="iw_container">' + '<div class="iw_title" style="color:#32CD32;">Site Name : ' + marker.sitename + '</div>' + '<div class="iw_title" style="color:#32CD32;">Site Address : ' + marker.siteaddr + '</div>' + '<div style="color:#32CD32;float:left;padding-right:4px;" class="iw_title">Active Employees : ' + marker.activeEmp + '<div style="color:#32CD32;" class="iw_title">Active Devices : ' + marker.activeDevice + '</div></div>';
                    } else {
                        iwContent = '<div id="iw_container">' + '<div class="iw_title" style="color:#FF0000;">Site Name : ' + marker.sitename + '</div>' + '<div style="color:#FF0000;" class="iw_title">Site Address : ' + marker.siteaddr + '</div>' + '<div style="color:#FF0000;" class="iw_title">Active Employees : ' + marker.activeEmp + '</div>' + '<div style="color:#FF0000;" class="iw_title">Active Devices : ' + marker.activeDevice + '</div></div>';

                    }
                    //opening info window on mouseover
                    google.maps.event.addListener(marker, 'mouseover', (function(marker, iwContent, infowindow) {
                        return function() {
                            // including content to the Info Window.
                            infowindow.setContent(iwContent);
                            // opening the Info Window in the current map and at the current marker location.
                            infowindow.open(map, marker);
                        };
                    })(marker, iwContent, infowindow));

                    // on mouseout (moved mouse off marker) make infoWindow disappear
                    google.maps.event.addListener(marker, 'mouseout', (function(marker, iwContent, infowindow) {
                        return function() {
                            // closing the Info Window in the current map and at the current marker location.
                            infowindow.close();
                        };
                    })(marker, iwContent, infowindow));
                    markersArr.push(marker);
                } else {
                    alert('Geocode was not successful for the following reason: ' + status);
                }
            });
        }
    </script>
</body>

</html>

2 個解決方案

解決方案1
 0  2018-06-20 13:36:23

getMapData不會被調用在你的代碼...取消注釋getMapData，你將能夠看到的錯誤和成功回調正常

解決方案2
 0 已采納  2018-06-21 05:14:49

要調試問題所在，可以使用以下錯誤函數的其他參數。 這將使您更容易研究實際問題。 

$.ajax({
            url: "http://127.0.0.1:8180/services/restService/GetSitesData?clientname=" + "Interserve Spain",
            type: "GET",
            async: true,
            success: function(json) {
                mapDatset = json;
                console.log("mapdata Json Length :" + mapDatset.length);
                console.log("Received json :" + JSON.stringify(mapDatset));
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('jqXHR:');
                console.log(jqXHR);
                console.log('textStatus:');
                console.log(textStatus);
                console.log('errorThrown:');
                console.log(errorThrown);
            }
        });

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 AJAX函數呼吁成功 成功調用ajax函數 在 AJAX 成功響應中調用函數？ 成功執行4-5次Ajax調用時調用javascript函數 Ajax成功和錯誤功能無法在jQuery中正確調用 Ajax調用Rest服務未成功調用Ajax中的成功函數 在 ajax 中調用 beforeSend 成功 jQuery $ .ajax-從成功函數調用錯誤函數嗎？ 在范圍之外的ajax成功上調用敲除模型函數 使用jQuery 1.8.3時Ajax響應未調用success：function（）
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM