通过 xml 路径名从外部文件夹读取文本文件（谷歌地图 API）答案

【问题标题】：Reading text file from external folder via xml path name (Google maps API)通过 xml 路径名从外部文件夹读取文本文件（谷歌地图 API）
【发布时间】：2011-08-19 19:36:56
【问题描述】：

我正在根据客户请求构建基于 Google 地图 API 的网页。我将数据库中的数据提取到 xml 中，然后将其链接到地图上的标记（每条记录的部分数据是纬度和经度，用于设置标记）。当用户点击标记时，他们会在页面 div 中看到与该地点相关的内容（内容是标题、照片、音频文件和音频文件的副本）。

一切正常，除了...我不知道如何显示成绩单，这是一个文本文件。 xml 节点包含完整路径名，实际文件所在的文件夹存储在服务器上。我知道如何使用 php 执行此操作，但无法使用 php 扩展名重命名我的文件，因为 Google Maps API 不允许（地图消失）。

以下是代码的相关部分：

downloadUrl("xmlTest.php", function(data) 
  {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("Sound_xcrpt");
    for (var i = 0; i < markers.length; i++) 
    {
      var title = markers[i].getAttribute("se_title");
      var desc = markers[i].getAttribute("se_desc");
      var type = markers[i].getAttribute("se_contrib");
      var ph_title = markers[i].getAttribute("ph_title");
      var ph_web = markers[i].getAttribute("ph_web");
      var ph_thumb = markers[i].getAttribute("ph_thumb");
      var trans_ex = markers[i].getAttribute("trans_xcrpt");        
      var audio = markers[i].getAttribute("se_audio_file");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("se_lat")),
          parseFloat(markers[i].getAttribute("se_lng")));


      var html =   

      '<head>' +
      '<link rel="stylesheet" href="infoStyle.css" type="text/css">' +
      '</head>' +
      '<html>' +
      '<body>' +        
      '<header id="title">' + title + '</header>' + 
      '</section id="desc">' + desc +
      '</section>' +
      '<section id="photo_thumb">' +
      '<img src="'+ph_thumb+'"/>' +
      '</section>' +
      '</body>' +
      '</html>';

      var winHtml = 
      '<head>' +
      '<link rel="stylesheet" href="styleWin2.css">' +
      '</head>' +
      '<body>' +
      '<header id="title2">' + ph_title + '</header>' +
      '<div class="photos">' + 
      '<img src="'+ph_web+'"/>' + 
      '</div>' +
      '<div class="trans">' +trans_ex+  
      '</div>' +
      '<footer id="audio">' +
      '<audio autoplay="autoplay" controls="controls">' + 
      '<source src="'+audio+'">' +
      '</audio>' +
      '</footer>' +
      '</body>';

      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker(
      {
        map: map,
        position: point,
        icon: icon.icon,
        animation: google.maps.Animation.DROP,
        shadow: icon.shadow
      });

      bindInfoWindow(marker, map, infoWindow, html);
      contentBox(marker, map, content, winHtml, infoWindow);

    }
  });
}

"trans_ex" 保存路径名数组。上面的代码设置方式，它在 div 中显示实际路径名，而不是该路径名指向的文本文件的内容。

是否有 javascript（或 jquery）方法来执行此操作？我知道这很棘手，因为我在这里有一个服务器端请求。

谢谢你的帮助，谢丽尔

【问题讨论】：

哦，我忘了包括一些东西。我看到这段代码看起来很有希望：
...那个代码是... var txtFile = new XMLHttpRequest(); txtFile.open("GET", "trans_ex", true); txtFile.onreadystatechange = function() { if (txtFile.readyState === 4) { // if (txtFile.status === 200) { allText = txtFile.responseText;行 =txtFile.responseText.split("\n"); } } } txtFile.send(null);
抱歉 - 新手 - 没有意识到您无法在评论中正确格式化代码。忽略上一个...

标签： javascript jquery xml text

【解决方案1】：

您需要调用 AJAX 从服务器获取脚本，并在单击标记后将其附加到 DIV。您第二条评论中的 XMLHttpRequest 对象是 AJAX 的基础，而 jquery 有一个非常好的抽象，可以通过 jQuery.ajax() (http://api.jquery.com/jQuery.ajax/) 做到这一点。

它基本上隐藏了第二个 cmets 中的复杂性，并让您在收到响应后处理您想要执行的操作。在您的情况下，您希望脚本的 DIV 填充来自脚本的响应。

其实jQuery通过提供load()函数做了进一步的抽象（http://api.jquery.com/load/）。您需要在标记的单击事件时调用此函数并为其提供正确的脚本路径

【讨论】：

谢谢 - 你让我走上了正确的道路。有一些棘手的事情：我通过 xml 路径名获取文本文件，并将其加载到位于与标记脚本相关的变量 (winHtml) 内的 div 中。我会考虑的...

【解决方案2】：

您想显示文本文件的内容吗？以下 URL 的人也需要读取文本文件的内容。也许这会有所帮助？

jquery - Read a text file?

【讨论】：