将数据从Google文档转换为Javascript [英] Getting data from Google docs into Javascript
问题描述
当我在本地测试html页面时，我尝试从Google电子表格中获取数据，并且一切正常.但是，当我将html文件和javascript文件加载到服务器时，没有任何效果.
I try to get data from google spreadsheets and everything is allright when I'm testing html page locally. But when I load my html file and javascript file into server nothing works.
这是html文件"page.htm"的代码:
Here is the code of html file "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":
And js file "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);
}
推荐答案
在我自己的服务器上对此进行了尝试-在浏览器的控制台上出现了以下CORS错误:
Tried this on my own server - got a following CORS error on the browser's console:
这意味着您无法使用浏览器直接访问该url，因为Google的服务器未发送回允许此操作的必填标头字段.
This means that you cannot directly access the url with your browser, because the Google's server is not sending back a required header field that would allow this.
一种解决方法是使用替代API，该API可为我们提供Google电子表格的JSONP格式输出:
A way around this is to use an alternative API, that can provide us with JSONP format output for the Google Spreadsheet:
因此，请考虑以下JavaScript:
So consider this 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://协议，该协议允许对任何域的某些请求，因为没有原始域可以匹配规则.这就解释了为什么您的代码可以在本地工作，而不是在将代码上传到服务器后才能工作.
This works as, rather than your won code, the Google's own server calls the Data function with the proper data - a method called JSONP that allows cross-domain data requests. Requesting data from another domain is blocked by default in the browsers. The only exception is the file:// protocol, which allows some requests to any domains, as there is no origin domain to match the rules. This explains why your code worked on the local, but not after it had been uploaded to the server.
这篇关于将数据从Google文档转换为Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
