无法使用 JSONP 从 API 随机获取详细信息

Question

有这个 randomQuote API 我想用 jQuery 调用。当我在邮递员中使用指定的参数调用 API 时，每次点击都会得到随机引号。但是当我在我的网页中使用 jQuery 时，我得到的是默认报价并且它没有改变。
objective 是在用户单击 button 时获取随机引用并将其显示在网页上。我正在使用 JSONP 绕过 Access-Control.

这是我的查询

 $(document).ready(function() {
  $("#click").each(function(index){
   $(this).on("click", function() {
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
  $("#quote span").replaceWith(key[0].content + "<p>— " + key[0].title + "</p>");
         });
      });
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

请参阅此 link 以了解 API https://quotesondesign.com/api-v4-0/

Answer 1

您使用的 replaceWith 不正确。您正在替换引号和跨度，使其不再具有 ID。这就是它第一次更新而不是第二次更新的原因。请参阅文档

http://api.jquery.com/replacewith/

$("#quote").replaceWith("<div id=quote><span>" + key[0].content + "<p>— " + key[0].title + "</span></p></div");

http://jsfiddle.net/andrewgi/e57zjgLb/。确保 fiddle 是 http 以便 API 有效。

Answer 2

像这样似乎工作正常。

function getGetOrdinal(n) {
   var s=["th","st","nd","rd"],
       v=n%100;
   return n+(s[(v-20)%10]||s[v]||s[0]);
}
var i = 1;
setInterval(function(){
console.clear();
 $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?",{beforeSend: function( ) {
    console.log("started "+getGetOrdinal(i)+" Ajax request");
  }}, function(a) {
  $("#quote span").html(i+": "+a[0].content + "<p>&mdash; " + a[0].title + "</p>")
}).done(function(){
  console.log("finished "+getGetOrdinal(i)+" Ajax request");  
  i++;
});

 }, 5000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote"><span></span></div>

或者像这样

function getGetOrdinal(n) {
   var s=["th","st","nd","rd"],
       v=n%100;
   return n+(s[(v-20)%10]||s[v]||s[0]);
}
var i = 1;
setInterval(function(){
console.clear();
 $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?",{beforeSend: function( ) {
    console.log("started "+getGetOrdinal(i)+" Ajax request");
  }}, function(a) {
  $("#quote span").replaceWith("<span>"+i+": "+a[0].content + "<p>&mdash; " + a[0].title + "</p></span>")
}).done(function(){
  console.log("finished "+getGetOrdinal(i)+" Ajax request");  
  i++;
});

 }, 5000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="quote"><span></span></div>

您的代码失败的原因是因为在 replaceWith() 的第一个运行中您删除了元素 span 因此没有匹配的 $("#quote span")对象在文档中任何更多为了replaceWith()第二个post.

Answer 3

我想通了 solution.As 之前评论中说的，循环是不必要的。

$(document).ready(function() {
  var content="";
  $("#click").click(function() {
    $.getJSON("//quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(key) {
     content=key[0].content + "<p>— " + key[0].title + "</p>";
      $("#quote-form").html(content);
      console.log(content);
    });
    
    $("#quote-form").css({"font-family":"lucida console", "font-size": "20px","color":"rgb(255,255,150)"});
     
  });
 
});

应该使用 html 方法而不是 replaceWith。（参考之前回答为什么这里不应该使用replaceWith的解释

无法使用 JSONP 从 API 随机获取详细信息

Not able to fetch details at random order from API by using JSONP

javascript

jquery

access-control