Question

我尝试从谷歌电子表格中获取数据，当我在本地测试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

Answer 1

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

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

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

所以请考虑这个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://协议，它允许对任何域的一些请求，因为没有原始域来匹配规则。这解释了为什么您的代码在本地工作，但在上传到服务器之后没有。

Answer 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>

你应该看到类似的东西：

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

2 个答案: