如何在分页中使用 AJAX 加载内容？答案

【问题标题】：How to load content with AJAX in pagination?如何在分页中使用 AJAX 加载内容？
【发布时间】：2016-01-25 11:24:37
【问题描述】：

在编写画廊时遇到问题。画廊有分页。每页应该是不同的图片。切换页面时是否借助 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>

【问题讨论】：

例如：在第一页，我们有 4 张照片，我们去另一个页面已经有另外 4 张照片。
所以你想每页都有不同的图片吗？页面是 html 页面还是使用 javascript 更改（如 angular 或 Ember 或任何其他单页应用程序库）
页面上的内容应使用 JavaScript 进行更改。切换分页时只需上传新照片即可。
什么是更改代码，您是要求我们为您提供吗？
一个如何使用Ajax在主页面加载新内容，切换分页的例子。

标签： javascript jquery css ajax pagination

【解决方案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";
  }

【讨论】：