javascript - 如何在分页中使用AJAX加载内容？

Question

在写画廊的时候遇到了一个问题。 画廊有分页。每个页面应该有不同的图片。 切换页面时是否可以借助 AJAX 将新内容上传到图库？ 如果能给我一个例子，我将不胜感激!

<!-- Pagination -->
<div class="text-center">
  <div class="container">
    <ul class="pagination">
      <li class="disabled">
        <a href="#">
                       «
        </a>
      </li>
      <li class="active">
        <a href="#">
                     1 
                      <span class="sr-only">
                        (current)
                      </span>
        </a>
      </li>
      <li>
        <a href="#">
                     2
        </a>
      </li>
      <li>
        <a href="#">
                     3
        </a>
      </li>
      <li>
        <a href="#">
                     4
        </a>
      </li>
      <li>
        <a href="#">
                     5
        </a>
      </li>
      <li>
        <a href="#">
                     »
        </a>
      </li>
    </ul>
  </div>
</div>

<!-- Gallery -->
<div class="gallery">
  <div class="container">
    <div class="row">
      <h1 id="galleryTitel">
                            Your work
                        </h1>
      <div class="col-lg-3 col-sm-4 col-xs-6">
        <a title="Image 1" href="#">
          <img class="thumbnail img-responsive center-block" src="http://i58.tinypic.com/30ufot0.png">
        </a>
      </div>
      <div class="col-lg-3 col-sm-4 col-xs-6">
        <a title="Image 2" href="#">
          <img class="thumbnail img-responsive center-block" src="http://i58.tinypic.com/30ufot0.png">
        </a>
      </div>
      <div class="col-lg-3 col-sm-4 col-xs-6">
        <a title="Image 3" href="#">
          <img class="thumbnail img-responsive center-block" src="http://i58.tinypic.com/30ufot0.png">
        </a>
      </div>
      <div class="col-lg-3 col-sm-4 col-xs-6">
        <a title="Image 4" href="#">
          <img class="thumbnail img-responsive center-block" src="http://i58.tinypic.com/30ufot0.png">
        </a>
      </div>
    </div>
  </div>

Answer 1

要更改图像，您只需更改其 src；据我所知，您有几个链接。

  var img1 = document.querySelector('YOURIMGID/CLASS');
  var img2 = document.querySelector('YOURIMGID/CLASS');
  var img3 = document.querySelector('YOURIMGID/CLASS');
  var img4 = document.querySelector('YOURIMGID/CLASS');
  document.querySelector('YOURLINKID/CLASS').onclick = function() {
        img1.src = "YOURNEWSRC";
        img2.src = "YOURNEWSRC";
        img3.src = "YOURNEWSRC";
        img4.src = "YOURNEWSRC";
  }