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

Question

我正在嘗試在“ https://learn.sparkfun.com/tutorials/electric-imp-breakout-hookup-guide/all#example-3-web-response “上遵循“示例3：Web響應”

我在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

問題出在您設置網絡應用程序的方式上。 在Google Apps腳本Code.gs文件中，更改doGet()函數：

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

您所擁有的方式，就是期望模板HTML。