Question

我正在学习JS，我需要一些帮助来弄清楚为什么我的信息没有填充到html中。我只是想让基本功能起作用，以便我可以继续扩展它。

用户应该输入一个3位数的路由值，然后返回来自api呼叫的所有路由信息。我能够在设置api呼叫时更早地显示路由信息，但是我很难理解为什么现在没有显示我尝试添加一个功能以允许用户输入路由。 See attached pen

HTML

<div class='container'>
    <h1 id='header'>Route Info</h1>
    <input id="input" type="text" placeholder="Enter 3 digit route ex 005" >
    <input type="button" value="Get Route" onclick="getRoute()">
    <br>
    <p id = 'p'><span id="routeInfo"></span></p>
</div>

的Javascript

$(document).ready(function() {
    var route = $('#input');
    getRoute.click(function() {
        var scriptTag = document.createElement('SCRIPT');
        scriptTag.src = "https://wsdot.wa.gov/Traffic/api/Bridges/ClearanceREST.svc/GetClearancesAsJson?AccessCode=59a077ad-7ee3-49f8-9966-95a788d7052f&callback=myCallback&Route=" + route;
        document.getElementsByTagName('HEAD')[0].appendChild(scriptTag);
        var myCallback = function(data) {
            var myarray = Array.prototype.slice.call(data);
            document.getElementById("routeInfo").innerHTML = JSON.stringify(myarray);
        }
    });
});

Answer 1

如果您希望运行getRoute.click回调中的功能，则需要将其重写为方法function getRoute()，或者通过jQuery获取按钮元素并将其分配给变量getRoute。按照目前的情况，您可以通过标记将click方法连接到名为getRoute的函数，该函数不存在。在JS中，您尝试将click事件注册到名为getRoute的jQuery对象，该对象不存在。

Answer 2

getRoute需要是一个全局函数，可以从html中调用它：

getRoute = (function() {

另外，myCallback需要是一个全局函数，可以从你加载的脚本中调用它（只需删除var）：

myCallback = function(data) {

Answer 3

看起来你正在跳过很多你不需要的箍。只要您使用Jquery，就应该考虑使用ajax请求获取api数据。它更容易，更直观。此外，您还有一些问题，例如尝试使用返回实际输入元素的var route = $('#input');来获取输入值。您还将以不起作用的方式处理返回的数据。

这是让你继续（IMO）更好的轨道的基本例子：

function getRoute() {
   var route = $('#input').val();
   var url = "https://wsdot.wa.gov/Traffic/api/Bridges/ClearanceREST.svc/GetClearancesAsJson?AccessCode=59a077ad-7ee3-49f8-9966-95a788d7052f&Route=" + route;

    $.ajax({url: url, success: function(data){
        var retValue = "";
        var i = 0
        for(i; i< data.length; i++) {
            retValue += data[i].BridgeName + "<br>"
        }
        document.getElementById("routeInfo").innerHTML = retValue;

    }});

}

用户输入后显示api的结果

3 个答案: