Question

我正在从免费代码营中学习javascript。目前正在做关于生成随机引用的问题。当我点击我的按钮时，我不确定为什么它不会更新。有人可以看看并评论它吗？

这是我的剧本

$(document).ready(function() {
  var url = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=json";
 // on click event, obtain an instance of the data from api
  $("#buttonGenerator").on("click", function() {
    $.getJSON(url, function(data){
    $("#quote").html(data.quoteText);
      $("#author").html(data.quoteAuthor);
    });
  });
});

Answer 1

发现有关forismatic提供的jsonp api。以为你可能仍然可以实现你的目标。

您可能希望看到CORS。

由于此访问控制，jsonp API开始出现。

您的代码很好（只需根据我们的需求找到正确的API！）

$(document).ready(function() {
    var url = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
    // on click event, obtain an instance of the data from api
    $("#buttonGenerator").on("click", function() {
        
        $.getJSON(url, function(data){
            $("#quote").html(data.quoteText);
            $("#author").html(data.quoteAuthor);
        });
    });
});

    <html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
    <div class="jumbotron text-center">
        <h1 style="color: #1287A8">
            Random Quote Machine
        </h1>
        <hr size="" />
    </div>
    <div class="container">
        <div class="row">
            <!--Left button-->
            <div class="col-md-2">
                <button id="buttonGenerator"type="button" class="btn btn-info">
                    <p id="buttonText">Generate Quote</p>
                </button>
                <br />
                <br />
                <button id="buttonTwitter"type="button" class="btn btn-info buttons">
                    <p id="buttonText">Tweet out!</p>
                </button>
            </div>
            <!--End of button-->
            <!--Text box-->
            <div class="col-md-9">
                <span id="quotations"><em><i>"</i></em></span>
                <p id="quote"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
                    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                <p class="pull-right"><span style="font-size: 20px">-</span> <i id="author"> George Washington</i></p>
            </div>
            <!--End of Text Box-->
        </div>
        <!--End of Container-->
        <!--Footer-->
        <footer>
            <p>Done By Nathaniel D Alcedo Jr</p>
        </footer>
        </div>
    </body>
    </html>

如果发现有用，请接受。

有人可以更正我的JavaScript代码吗？（免费代码营）

1 个答案:

有人可以更正我的JavaScript代码吗？ （免费代码营）

1 个答案:

有人可以更正我的JavaScript代码吗？（免费代码营）