Question

我目前正在使用codepen.io开发一个小型随机报价生成器（Freecodecamp Project）。您可以在此处找到它：http://codepen.io/Baumo/pen/VjQbBj?editors=1000

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

<script>
  $(document).ready(function(e){
        $('#getQuote').click(function(){
        $.ajax({
          dataType: "json",
          url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
            success: function(a) {
            $(".quote").html(a[0].content + "<p>&mdash; " + a[0].title + "</p>");
          }
        });
     });
  });  
</script>

<body>
  <div class="box">
    <div class="message quote">

    </div>
    <div class = "right">
      <button class="btn" id="getQuote">
        NEW QUOTE
      </button>
    </div>
  </div>
</body>

如果我使用Microsoft Edge打开页面，它可以正常工作。但在谷歌Chrome中，＆＃34;新报价＆＃34;按钮仅在我第一次单击时才起作用。

任何想法如何解决这个问题？

谢谢！

Answer 1

Chrome正在积极缓存您的ajax请求。将cache: false添加到请求中：

    $.ajax({
      dataType: "json",
      url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      cache: false,
        success: function(a) {
        $(".quote").html(a[0].content + "<p>&mdash; " + a[0].title + "</p>");
      }
    });

getJson只能在Google Chrome中使用一次

1 个答案: