Google Apps腳本Web應用程序AJAX，jQuery，JSON？

Question

我試圖遵循：在「示例3 Web響應」，「https://learn.sparkfun.com/tutorials/electric-imp-breakout-hookup-guide/all#example-3-web-response」

我實施了script.google.com的代碼，但無法看到銷讀數。有人能幫助我嗎！下面是代碼

http://jsfiddle.net/8GdLw/44/

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

<script> 
    $(function() { 
     // Edit these values first! The externalURL variable should be the 
     // unique URL of your agent. e.g. the last part of: 
     // https://agent.electricimp.com/UpyYpRLmBB7m 
     // pollRate defines how often the values on your page will refresh. 
     var externalURL ="8XpIqEEdiILG"; 
     var pollRate ="1000"; 

     function poll(){ 
      // Construct an ajax() GET request. 
      // http://www.w3schools.com/jquery/ajax_ajax.asp 

      $.ajax({ 
       type: "get", 
       url: "https://agent.electricimp.com/"+externalURL, // URL of our imp agent. 
       dataType: "json", // Expect JSON-formatted response from agent. 
       success: function(agentMsg) { // Function to run when request succeeds. 

        // jQuery find "pin1" id and overwrite its data with "pin1" key value in agentMsg 
        $("#pin1").html(agentMsg.pin1);    
        $("#pin2").html(agentMsg.pin2); 
        $("#pin5").html(agentMsg.pin5); 
        $("#pin7").html(agentMsg.pin7); 
        $("#pin8").html(agentMsg.pin8); 
        $("#pin9").html(agentMsg.pin9); 
        $("#vin").html(agentMsg.voltage); 

        updateBG(agentMsg.pin5); // Try this if you have a photocell connected to pin 5 
       }, 
       error: function(err) { 
        console.log("err"+ err.status) 
       } 
      }); 
     } 

     // setInterval is Javascript method to call a function at a specified interval. 
     // http://www.w3schools.com/jsref/met_win_setinterval.asp 
     setInterval(function(){ poll(); }, pollRate); 

     // This function updates the 
     function updateBG(lightSensor) 
     { 
      if (lightSensor > 30000) 
      { 
       document.body.style.backgroundColor = "#FFFFFF"; 
      } 
      else 
      { 
       document.body.style.backgroundColor = "#AAAAAA"; 
      } 
     } 
    }); 
</script> 

     <h3>Imp Pins:</h3> 
    <div id="pins"> 
    <p> <b>Pin 1:</b> <span id="pin1"><!-- This is where the pin 1 reading will go --></span></p> 
    <p> <b>Pin 2:</b> <span id="pin2"><!-- This is where the pin 2 reading will go --></span></p> 
    <p> <b>Pin 5:</b> <span id="pin5"><!-- This is where the pin 5 reading will go --></span></p> 
    <p> <b>Pin 7:</b> <span id="pin7"><!-- This is where the pin 7 reading will go --></span></p> 
    <p> <b>Pin 8:</b> <span id="pin8"><!-- This is where the pin 8 reading will go --></span></p> 
    <p> <b>Pin 9:</b> <span id="pin9"><!-- This is where the pin 9 reading will go --></span></p> 
    <p> <b>Voltage:</b> <span id="vin"><!-- This is where the voltage reading will go --></span></p> 

上jfiddle

我真的很感激這裏一些幫助工作。

謝謝

Answer 1

這是因爲當元素不存在時首先執行腳本。

腳本標籤應該在貼有標識ID的標籤後進行聲明。

喜歡的東西（裏面）

 <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script> 
     $(function() { 
     // Edit these values first! The externalURL variable should be the 
     // unique URL of your agent. e.g. the last part of: 
     // https://agent.electricimp.com/UpyYpRLmBB7m 
     // pollRate defines how often the values on your page will refresh. 
     var externalURL ="8XpIqEEdiILG"; 
     var pollRate ="1000"; 

     function poll(){ 
      // Construct an ajax() GET request. 
      // http://www.w3schools.com/jquery/ajax_ajax.asp 

      $.ajax({ 
      type: "get", 
      url: "https://agent.electricimp.com/"+externalURL, // URL of our imp agent. 
      dataType: "json", // Expect JSON-formatted response from agent. 
      success: function(agentMsg) { // Function to run when request succeeds. 

       // jQuery find "pin1" id and overwrite its data with "pin1" key value in agentMsg 
       $("#pin1").html(agentMsg.pin1);    
       $("#pin2").html(agentMsg.pin2); 
       $("#pin5").html(agentMsg.pin5); 
       $("#pin7").html(agentMsg.pin7); 
       $("#pin8").html(agentMsg.pin8); 
       $("#pin9").html(agentMsg.pin9); 
       $("#vin").html(agentMsg.voltage); 

       updateBG(agentMsg.pin5); // Try this if you have a photocell connected to pin 5 
      }, 
      error: function(err) { 
       console.log("err"+ err.status) 
      } 
      }); 
     } 

     // setInterval is Javascript method to call a function at a specified interval. 
     // http://www.w3schools.com/jsref/met_win_setinterval.asp 
     setInterval(function(){ poll(); }, pollRate); 

     // This function updates the 
     function updateBG(lightSensor) 
     { 
      if (lightSensor > 30000) 
      { 
      document.body.style.backgroundColor = "#FFFFFF"; 
      } 
      else 
      { 
      document.body.style.backgroundColor = "#AAAAAA"; 
      } 
     } 
     }); 
    </script> 

<h3>Imp Pins:</h3> 
<div id="pins"> 
<p> <b>Pin 1:</b> <span id="pin1"><!-- This is where the pin 1 reading will go --></span></p> 
<p> <b>Pin 2:</b> <span id="pin2"><!-- This is where the pin 2 reading will go --></span></p> 
<p> <b>Pin 5:</b> <span id="pin5"><!-- This is where the pin 5 reading will go --></span></p> 
<p> <b>Pin 7:</b> <span id="pin7"><!-- This is where the pin 7 reading will go --></span></p> 
<p> <b>Pin 8:</b> <span id="pin8"><!-- This is where the pin 8 reading will go --></span></p> 
<p> <b>Pin 9:</b> <span id="pin9"><!-- This is where the pin 9 reading will go --></span></p> 
<p> <b>Voltage:</b> <span id="vin"><!-- This is where the voltage reading will go --></span></p> 

Answer 2

的問題是與你設置你的web應用程序的方式。在谷歌Apps腳本Code.gs文件，更改doGet()功能：

function doGet() { 
    return HtmlService 
     .createHtmlOutputFromFile('Page1') 
    } 

你有它的方式，它期待模板HTML。