Question

在加载页面时，getJSON调用会将其输出显示给div（称为myDiv）。

现在我想在页面末尾添加一个按钮，当用户点击该按钮时，我想再次调用getJSON，但这次我想将page_number增加一个，每个用户点击按钮的时间，并在之前结果的末尾显示新结果。你们能告诉我怎么做吗？

<head>
  <script>
    //var counter = 1;
    $.getJSON('http://anyorigin.com/get?url=https://www.myothersite.com/getit.php?page_number=+counter&type=TopVideos&sortBy=newest&callback=?', function(data){
      var siteContents = data.contents;
      //writes to textarea
      document.myform.outputtext.value = siteContents;
      document.getElementById("myDiv").innerHTML=siteContents;
      $('#loadingimg').hide();
    });
  </script>
</head>
<body>
  <div class="MainDiv">
    <div class="MainContent">
      <div class="ContentWidth">
        <div id="JSListVideo" class="VideoList">
          <div id="myDiv"></div>

按钮代码：

<div class="MoreButtonSection">
  <div class="RedButton">
    <span class="LeftEnd"></span>
    <span class="Centre">
      <a href="javascript:void(0);" onclick="seemore();" title="See more">see more</a>
    </span>
    <span class="RightEnd"></span>
  </div>
</div>

Answer 1

首先在$(document).ready();内包装代码。

现在您需要为该按钮创建一个click事件，以便在单击该按钮时，它将调用getJson，然后您可以将数据附加到所需的div，因为现在您的代码将仅在加载时运行。

示例

$(document).ready(function() { var counter = 1; $('button').on('click',function() { $.getJSON('http://anyorigin.com/get?url=https://www.myothersite.com/getit.php?page_number=+counter&type=TopVideos&sortBy=newest&callback=?', function(data) { var siteContents = data.contents; document.myform.outputtext.value = siteContents; $("myDiv").html(siteContents); $('#loadingimg').hide(); }); counter++; }); });

Answer 2

在回答之前，我建议你坚持使用一种方法，jQuery语法或Javascript。我想你想要分页代码。下面的代码可能对您有用。

我想在下面告诉你如何做到这一点。如果我错了，请纠正我。

//initialize page number to 1 default
var pagenumber=1;
$(document).ready(function(){
  //load first page records on page load
  getResult(pagenumber);
});

//pass pagenumber to function to fetch correct page records
function getResult(pagenumber){
  $.getJSON('http://anyorigin.com/get?url=https://www.myothersite.com/getit.php?page_number='+ pagenumber +'+counter&type=TopVideos&sortBy=newest&callback=?', function(data){});
  //after every call increment page number value
  pagenumber++;
}
$('btnLoadMore').click(function(){
  //simply call getResult
  getResult(pagenumber);
});

我找不到代码中的seemore()函数。也许你想要这样的东西。您的HTML必须是：

<a href="#" onclick="return seemore();" title="See more">see more</a>

JS必须是：

function seemore(){
  counter++;
  return false;
}

counter必须是全局变量才能访问它。不知道您的网址：

http://anyorigin.com/get?url=https://www.myothersite.com/getit.php?page_number=+counter&type=TopVideos&sortBy=newest&callback=?

我认为应该是：

http://anyorigin.com/get?url=https://www.myothersite.com/getit.php?page_number='+ counter +'&type=TopVideos&sortBy=newest&callback=?

Answer 3

您只需为当前值添加值即可。看看吼叫：

document.getElementById("myDiv").innerHTML += siteContents;

如何在每次单击loadmore按钮时将getJSON的结果附加到div？

3 个答案: