使用来自Google Maps API的异步调用的响应

Question

我有一个.json文件，我试图将其导入为文本字符串。

这是确切的文件内容：

{ "type": "Polygon", "coordinates": [ [ [ 1.5887868, 50.8315241 ], [ 1.5830702, 50.8466931 ].......  ] ] ] }

我正在尝试使用它导入它：

jsonString = jQuery.get('./polygons/1.json', function(data) {    
  console.log(data);            
}); 

然而，console.log(data)作为一个数组出现，我不希望它 - 我只想要文本文本字符串，就像在文件中一样。

我如何做到这一点？

更新

所以我的整个代码是：

jsonString = jQuery.get('./polygons/1.json', function(data) {    

  return JSON.stringify(data);

});

但现在我在下面看到这个截图：

我想这是我想要出去的responseText。为什么jQuery.get将所有这些额外信息添加到我的文件中？我做错了什么？

第二次更新

当有人花时间向我解释某些事情时，我总是感觉很糟糕，而我却不明白。 所以，这整个事情都存在，因此我可以将动态数据提取到jsonString，具体取决于用户的需求。

现在，我必须通过制作具有地理数据坐标的单个文件，然后使用map.data.loadGeoJson('./maps_polygons/' + territory + '.json');

来利用它来实现这一壮举

function mapClick(data) {

territory = data; //the section of the map that the user clicks on, e.g. `california` or `texas`

var mapOpt = {
  center:new google.maps.LatLng(50.477971, 0.482999),  
  zoom:8,  
  };

map = new google.maps.Map(document.getElementById("googleMap"),mapOpt);

map.data.loadGeoJson('./maps_polygons/' + territory + '.json');


google.maps.event.addDomListener(window, 'load', initialize);

}

现在，这个工作，但我觉得必须非常低效，所以我想把所有坐标保存在一个文件中，并将它们作为主要输入动态地引入{ {1}}已更改。这可以让GOT成为可能，从你所有人展示的内容中，我可以编写function mapClick(data)个查询，或者使用函数中的 ajax，这样就可以了带上json字符串，但这对我没有好处，因为它被困在该函数内部，我无法达到它。

这是我的沮丧......

最终更新

好的 - 向this page和this page以及@ Lye-Fish大喊大叫，最终帮助我了解这一切是如何运作的。

今晚在搜索SO时，我发现了很多关于这个主题方面的帖子，所以我想在最终让这两件事情发挥作用的时候就死了：

1. 从ajax电话中获取内容的想法（我发帖的原因）
2. 如何将其重新绑定到Google Maps API。

HTML

jQuery.get

Javascript

<area shape="poly" coords="..." href="#" alt="california" onClick="mapClick(alt)"/>

请注意，我没有在最终的function mapClick(data) { territory = data; function getPolygons(territory, passTodoWork) { jQuery.get('./maps_polygons/'+ territory +'.json', function(data, status, jqXHR) { var coordinates = JSON.parse(jqXHR.responseText); passTodoWork(territory,coordinates); }); } function drawMap(firstItem, secondItem) { var mapOpt = { center:new google.maps.LatLng(50.367247, 2.745326), zoom:8, }; map = new google.maps.Map(document.getElementById("googleMap"),mapOpt); map.data.addGeoJson(secondItem); map.data.setStyle({ fillColor: '#2b86cc', strokeColor: '#1e5c8c' }); google.maps.event.addDomListener(window, 'load', initialize); } getPolygons(territory, drawMap); } 函数中使用territory - 这是另一段代码的一部分，这使得这个问题太长了，无法证明这一点......

Answer 1

像这样使用JSON.stringify

console.log(JSON.stringify(data));

Answer 2

首先，最重要的是，您的grep变量不将保留响应。它将为请求保留jqXHR对象，最终会有响应，但您需要在回调中访问它。

其次，使用jsonString是而不是正确的解决方案。将序列化形式的数据序列化是没有意义的。

JSON.stringify对象包含jqXHR属性，该属性将为您提供实际未解析的响应正文。您也不需要从该变量中获取它。你可以从第3个参数到回调。

.responseText

你所拥有的jQuery.get('./polygons/1.json', function(data, status, jqXHR) { console.log(jqXHR.responseText); }); 声明什么也没做，所以我放弃了它。 return不会阻止执行，这意味着您需要在回调中选择它。

如果您真的不想解析它，那么我建议您更改响应标头，以便jQuery不会实现它的JSON数据。我很确定这就是为什么它会自动为你解析它。

如果您更改标题：

jQuery.get

到此：

Content-Type: application/json

它应该有用。

或者您可以发出Content-Type: text/plain 请求，并指定jQuery.ajax，这也可能有效。 "dataType: text"确实为您提供了另一个可以覆盖猜测的参数，但它似乎仅限于jQuery.get，xml，json或{{1 }}

要处理代码的异步性质，您需要在回调中选择执行。由于您可能不需要大量的应用程序代码，因此可以将其放在不同的函数中并调用它，并将数据传递给它。

html

如果同一类型的请求将用于不同的目的，您可以将其放在另一个函数中并传递一个回调函数，以便针对不同的情况进行调用。

script

如果您仍然无法使用jQuery执行您不想要的操作，请自行制作XHR请求。

jQuery.get('./polygons/1.json', function(data, status, jqXHR) {    
    console.log(jqXHR.responseText);
    // do some other stuff in here

    doWork(jqXHR.responseText);
});

function doWork(data) {
    console.log("Now we have it here: ", data);
}

如果HTTP响应代码对您有意义，您还可以查看回调中的function getPolygons(callback) { jQuery.get('./polygons/1.json', function(data, status, jqXHR) { console.log(jqXHR.responseText); // do some other stuff in here callback(jqXHR.responseText); }); } function doWork(data) { console.log("Now we have it here: ", data); } function doOtherWork(data) { console.log("And now it's here: ", data); } getPolygons(doWork); // ...some other part of the app... getPolygons(doOtherWork); 。仅供参考，function getPolygons(callback) { var xhr = new XMLHttpRequest() xhr.open("GET", "./polygons/1.json", true); xhr.onreadystatechange = function() { if (this.readyState === 4) { console.log(this.responseText); // do some other stuff in here callback(this.responseText); } }; xhr.send(null); } 与this.status变量持有的对象相同。

Answer 3

我认为你可以使用$ .ajax作为.get正在使用它，并定义像这样的dataType，所以没有双重解析..

$.ajax({
  url: './polygons/1.json',
  method: "POST",
  dataType: "text"
});