Getting data from Google docs into Javascript - Stack Overflow

admin2025-04-26 13

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.

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>

And js file "teams.js":

function Data() {
var url="?&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

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.

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>

And js file "teams.js":

function Data() {
var url="https://docs.google./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

Share Improve this question edited Oct 29, 2015 at 17:56 SwiftArchitect 48.6k29 gold badges143 silver badges184 bronze badges asked Oct 29, 2015 at 17:29 Rm1 631 gold badge2 silver badges7 bronze badges

What does your browser's console say? Any errors? (I'm voting for CORS error) – jehna1 Commented Oct 29, 2015 at 17:32
It says nothing - on browser I can see just an empty field "Team.tName" where should be a word "Team1" – Rm1 Commented Oct 29, 2015 at 17:39
Actually I did it like here: stackoverflow./questions/16485255/… – Rm1 Commented Oct 29, 2015 at 17:42
Would it be possible to get the link to the actual, uploaded files? – jehna1 Commented Oct 29, 2015 at 17:56
unfortunately no - I used not mine server. But I cheked if it's problem with connection between html file and js-file: I had put into js-file at function "Data()" a string "document.Team.tName.value = Team1" - and it started to work. PS Browsers in which I checked this - Chrome, Opera, IE – Rm1 Commented Oct 29, 2015 at 18:01

| Show 1 more ment

2 Answers 2

Sorted by: Reset to default 1

Tried this on my own server - got a following CORS error on the browser's console:

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.

A way around this is to use an alternative API, that can provide us with JSONP format output for the Google Spreadsheet:

So consider this JavaScript:

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

And the following 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./feeds/cells/18WEeF3d9pJWYK1sheNHgc0KOi845cjyZgJ8x6TVisFM/1/public/values?alt=json-in-script&callback=Data&range=A1"></script>
</body>
</html>

And it should work perfectly.

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.

When I run the code it works, fills the input with the csv file value. When I try to run the link on How do you Import data from a Google Spreadsheet to Javascript? got cross origin block from my browser.

If you can't run the script below you should try allowing CORS on your browser or perhaps try with ajax.load to get the file.

<html>

<head>
  <title>
  </title>
  <script type="text/javascript">
    function Data() {
      var url = "https://docs.google./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>

You should see it something like:

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745657445a312534.html

Getting data from Google docs into JavascriptStack Overflow

最新回复(0)