Question

我有一个代码，我从地理服务器请求数据并在地图上显示geoJSON。对于此请求，我使用了三个AJAX调用，如下所示：

//JSON request   
            var WFSLayer1 = null;
            var ajax = $.ajax({
                url: "http://localhost:8080/geoserver/PastDenver/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=PastDenver:dataset3&maxFeatures=300&outputFormat=text/javascript&format_options=callback:getJson",
                dataType: 'jsonp',
                jsonpCallback: 'getJson',
                success: function (response) {
                    WFSLayer1 = L.geoJson(response, {
                        style: function (feature) {
                            return {
                                weight: 5,
                                color: '#6e7ce8',
                                weight: 2,
                                opacity: 1,
                                dashArray: '3',
                                fillOpacity: 0.7,
                            };
                        },
                        onEachFeature: function (feature, layer) {
                            popupOptions = {
                                maxWidth: 200
                            };
                            if (feature.properties.name !== null) {
                                layer.bindLabel(feature.properties.name, popupOptions, {
                                    noHide: true
                                });
                            };
                            layer.bindPopup("<b>Name: </b>" + feature.properties.name + "<br><b>Description: </b>" + feature.properties.descr + "<br><b>Floors: </b>" + feature.properties.floors + "<br><b>Material: </b>" + feature.properties.material);
                            layer.on({
                                click: zoomToFeature
                            })
                        }
                    }).addTo(dataset1);
                }
            });

            var WFSLayer2 = null;
            var ajax = $.ajax({
                url: "http://localhost:8080/geoserver/PastDenver/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=PastDenver:dataset1&maxFeatures=300&outputFormat=text/javascript&format_options=callback:getJson",
                dataType: 'jsonp',
                jsonpCallback: 'getJson',
                success: function (response) {
                    WFSLayer1 = L.geoJson(response, {
                        style: function (feature) {
                            return {
                                weight: 5,
                                color: '#e31424',
                                weight: 2,
                                opacity: 1,
                                dashArray: '3',
                                fillOpacity: 0.7,
                            };
                        },
                        onEachFeature: function (feature, layer) {
                            popupOptions = {
                                maxWidth: 200
                            };
                            if (feature.properties.name !== null) {
                                layer.bindLabel(feature.properties.name, popupOptions, {
                                    noHide: true
                                });
                            };
                            layer.bindPopup("<b>Name: </b>" + feature.properties.name + "<br><b>Description: </b>" + feature.properties.descr + "<br><b>Floors: </b>" + feature.properties.floors + "<br><b>Material: </b>" + feature.properties.material);
                            layer.on({
                                click: zoomToFeature
                            })
                        }
                    }).addTo(dataset2);
                }
            });

            var WFSLayer3 = null;
            var ajax = $.ajax({
                url: "http://localhost:8080/geoserver/PastDenver/ows?service=WFS&version=2.0.0&request=GetFeature&typeName=PastDenver:dataset2&maxFeatures=300&outputFormat=text/javascript&format_options=callback:getJson",
                dataType: 'jsonp',
                jsonpCallback: 'getJson',
                success: function (response) {
                    WFSLayer3 = L.geoJson(response, {
                        style: function (feature) {
                            return {
                                weight: 5,
                                color: '#14e324',
                                weight: 2,
                                opacity: 1,
                                dashArray: '3',
                                fillOpacity: 0.7,
                            };
                        },
                        onEachFeature: function (feature, layer) {
                            popupOptions = {
                                maxWidth: 200
                            };
                            if (feature.properties.name !== null) {
                                layer.bindLabel(feature.properties.name, popupOptions, {
                                    noHide: true
                                });
                            };
                            layer.bindPopup("<b>Name: </b>" + feature.properties.name + "<br><b>Description: </b>" + feature.properties.descr + "<br><b>Floors: </b>" + feature.properties.floors + "<br><b>Material: </b>" + feature.properties.material);
                            layer.on({
                                click: zoomToFeature
                            })
                        }
                    }).addTo(dataset3);
                }
            });

请求后，每个JSON都会分配给特定的数据集。

现在我的问题：每次打开页面时，一切正常，但有时当我刷新页面时，一切都会分崩离析。例如，有时没有数据显示，有时数据最终会出现在错误的数据集上。当我收到此错误时，我在控制台中收到以下消息：

ows?service=WFS&version=2.0.0&request=GetFeature&typeName=PastDenver:dataset1&maxFeatures=300&outpu…:1 Uncaught TypeError: undefined is not a function

在我的研究中，似乎这种类型的错误在运行多个AJAX调用时非常常见。我不明白为什么这个错误不会100％发生。可以用什么类型的技术来修复它？我听说Deffered Objects但是无法将其应用到我的代码上，我对此的专业水平远远不够。

Here is the full code

虽然这可能倾向于GIS问题，但我认为这种类型的问题与普通的jQuery和异步调用更相关。

Answer 1

来自jQuery文档

<强> jsonpCallback

指定JSONP请求的回调函数名称。将使用此值代替jQuery自动生成的随机名称。最好让jQuery生成一个唯一的名称，因为它可以更容易地管理请求并提供回调和错误处理。如果要为GET请求启用更好的浏览器缓存，可能需要指定回调。

该函数可能未定义，因为jQuery可能在自身后清理并在调用后删除该函数。

删除jsonpCallback: 'getJson',让jQuery自己生成函数名称，然后你就不会覆盖以前的函数（并在第二次调用之前删除它们）。

多个AJAX调用请求JSONP的问题

1 个答案: