Google Apps Script Web App AJAX、jQuery、JSON？

Question

我正在尝试关注“https://learn.sparkfun.com/tutorials/electric-imp-breakout-hookup-guide/all#example-3-web-response”上的“示例 3：网络响应”

我在 script.google.com 上实现了代码，但无法看到 pin 读数。有人可以帮帮我吗！这是代码

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

这是因为当元素不存在时脚本首先执行。

脚本标签应该在带有 pin 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。