如何处理来自 Ajax POST 请求的多文件响应？

Question

我正在使用 OGRE web client 将 GeoJSON 文本数据转换为 ESRI 形状文件。为此，我使用 POST 请求 Ajax.

var data = { "type": "FeatureCollection",
  "features": [{
    "type": "Feature",
    "geometry": { "type": "Point", "coordinates": [102.0, 0.5] },
    "properties": { "prop0": "value0" }
  }]
};

function sendPost() {
    $.ajax({
        type: "POST",
        url: 'http://ogre.adc4gis.com/convertJson',
        data: {json:JSON.stringify(data)},
        success: success
    });
}

POST 请求的响应是多个文件（见图）：

我该如何处理这种反应？我想将文件添加到 ZIP 文件并下载。我想我可以通过使用 JSZip and FileSaver 库来做到这一点。它应该是这样的，但我不知道如何处理响应：

function success(result) {
    console.log(result);

    var zip = new JSZip();
    zip.file = ("file1.shp", result[--file1 in the response--])

    var content = zip.generate({type:"blob"});

    saveAs(content, "test.zip")
}

需要一些帮助！！ :)

编辑： 尝试使用 XHR 请求时，我似乎无法找到如何正确地将 JSON 作为 URL 中的文本传递，以便 URL 起作用：

params = {
    json: JSON.stringify(data)
}

function formatParams( params ){
  return "?" + Object
        .keys(params)
        .map(function(key){
          return key+"="+params[key]
        })
        .join("&")
}

var url_long = "http://ogre.adc4gis.com/convertJson";
var url = url_long + "?" + formatParams(params);

Answer 1

看起来结果已经是一个 zip 文件了。如果你只是想触发下载，你只需要 FileSaver。您唯一需要做的就是获取 binary 内容。如果没有进一步配置，$.ajax 将尝试将内容解码为 UTF8 并损坏内容。在此处获取 Blob（或 Uint8Array）是您所需要的。从开始，您可能需要使用原始 XHR 请求。

如果你想过滤zip文件的内容，那不会

var zip = new JSZip();
zip.file("file1.shp", result[--file1 in the response--])

而是

var zip = new JSZip(result);
// keep file1, remove file2, etc
zip.remove("file2.shp")

编辑：这里是如何使用 XMLHttpRequest POST json：

var formData = new FormData();
formData.append('json', JSON.stringify(data));

var xhr = new XMLHttpRequest();
xhr.open("POST", "http://ogre.adc4gis.com/convertJson");
xhr.responseType = "arraybuffer"; // ask for a binary result
xhr.onreadystatechange = function(evt) {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      var zip = new JSZip(xhr.response);
      console.log("success, got", Object.keys(zip.files));
    } else {
      console.log("http call error");
    }
  }
};

xhr.send(formData);

哪个显示器success, got Array [ "OGRGeoJSON.dbf", "OGRGeoJSON.prj", "OGRGeoJSON.shp", "OGRGeoJSON.shx" ]

如何处理来自 Ajax POST 请求的多文件响应？

How to handle a multiple files response from a Ajax POST request?

javascript

ajax

jquery

zip

json