将 Google 文档中的数据转换为 Javascript答案

【问题标题】：Getting data from Google docs into Javascript将 Google 文档中的数据转换为 Javascript
【发布时间】：2015-10-29 17:29:21
【问题描述】：

我尝试从谷歌电子表格中获取数据，当我在本地测试 html 页面时一切正常。但是当我将我的 html 文件和 javascript 文件加载到服务器时，没有任何效果。

这里是html文件“page.htm”的代码：

<html>
<head>
<title>
</title>
<script type="text/javascript" src="teams.js" >
</script>
</head>
<body
onload= "Data();">
<table>             
    <form name="Team">
    <tr>                
        <td>
        <input  size="19"  name="tName" readonly >
        </td>               
    </tr>
    </form>
    </table>
</body>
</html>

还有js文件“teams.js”：

function Data() {
var url="https://docs.google.com/spreadsheets/d/18WEeF3d9pJWYK1sheNHgc0KOi845cjyZgJ8x6TVisFM/pub?&gid=0&range=A1&output=csv";

xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState == 4 && xmlhttp.status==200){
      document.Team.tName.value = xmlhttp.responseText;
    }
  };
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
}

Google doc

【问题讨论】：

您的浏览器控制台说什么？有什么错误吗？（我投票支持 CORS 错误）
它什么也没说 - 在浏览器上我只能看到一个空字段“Team.tName”，其中应该是一个单词“Team1”
其实我是这样做的：stackoverflow.com/questions/16485255/…
能否获得实际上传文件的链接？
不幸的是，我没有使用我的服务器。但是我检查了html文件和js文件之间的连接是否有问题：我在函数“Data（）”的js文件中放入了一个字符串“document.Team.tName.value = Team1” - 它开始工作。我检查过的 PS 浏览器 - Chrome、Opera、IE

标签： javascript google-docs

【解决方案1】：

在我自己的服务器上尝试过 - 在浏览器的控制台上出现以下 CORS 错误：

这意味着您无法使用浏览器直接访问该网址，因为 Google 的服务器未发回允许此操作的必需标头字段。

解决此问题的一种方法是使用替代 API，它可以为我们提供 JSONP 格式的 Google 电子表格输出：

所以考虑一下这个 JavaScript：

function Data(response) {
  document.Team.tName.value = response.feed.entry[0].gs$cell.$t;
}

还有以下 HTML：

<html>
<head>
<title>
</title>
<script type="text/javascript" src="teams.js" >
</script>
</head>
<body>
<table>             
    <form name="Team">
    <tr>                
        <td>
        <input  size="19"  name="tName" readonly >
        </td>               
    </tr>
    </form>
    </table>
<script src="https://spreadsheets.google.com/feeds/cells/18WEeF3d9pJWYK1sheNHgc0KOi845cjyZgJ8x6TVisFM/1/public/values?alt=json-in-script&callback=Data&range=A1"></script>
</body>
</html>

它应该可以完美运行。

这是因为 Google 自己的服务器使用正确的数据调用 Data 函数，而不是您赢得的代码 - 一种称为 JSONP 的方法，它允许跨域数据请求。默认情况下，浏览器会阻止从另一个域请求数据。唯一的例外是file:// 协议，它允许对任何域的一些请求，因为没有源域来匹配规则。这解释了为什么您的代码在本地运行，但在上传到服务器后却无法运行。

【讨论】：

【解决方案2】：

当我运行它工作的代码时，用 csv 文件值填充输入。当我尝试在How do you Import data from a Google Spreadsheet to Javascript? 上运行链接时，我的浏览器收到了跨源块。

如果您无法运行下面的脚本，您应该尝试在您的浏览器上允许 CORS，或者尝试使用 ajax.load 来获取文件。

<html>

<head>
  <title>
  </title>
  <script type="text/javascript">
    function Data() {
      var url = "https://docs.google.com/spreadsheets/d/18WEeF3d9pJWYK1sheNHgc0KOi845cjyZgJ8x6TVisFM/pub?&gid=0&range=A1&output=csv";

      xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          document.Team.tName.value = xmlhttp.responseText;
        }
      };
      xmlhttp.open("GET", url, true);
      xmlhttp.send(null);
    }
  </script>
</head>

<body onload="Data();">
  <table>
    <form name="Team">
      <tr>
        <td>
          <input size="19" name="tName" readonly>
        </td>
      </tr>
    </form>
  </table>
</body>

您应该会看到如下内容：

【讨论】：