Le flux de cascade Ajax réalise le partage de démonstration (avec code)-js tutoriel-php.cn

Le flux de cascade Ajax réalise le partage de démonstration (avec code)

php中世界最好的语言

Libérer： 2018-03-31 16:25:00

original

1494 Les gens l'ont consulté

Cette fois, je vais vous proposer un partage de démonstration de l'implémentation du flux de cascade ajax (avec code). Quelles sont les précautions pour le partage de démonstration de l'implémentation de flux de cascade ajax ?

J'ai récemment entendu des amis dire qu'il y avait beaucoup de cascades, alors je suis allé les étudier moi-même. Je partage une démo native simple avec tout le monde...

<.>Simple Il est divisé en trois documents, avec des commentaires détaillés : img; ajax.php

où

img est placé dans le dossier Image d'entrée 1.jpg; 2.jpg; 3.jpg....

page ajax.php

<?php
　　//模拟从数据库读取数据
  $arr = array();
  $op = opendir(&#39;./img&#39;);  //打开目录
  //循环读取目录
  while (($file = readdir($op)) !== false) {
    //过滤点和点点
    if ($file == &#39;.&#39; || $file == &#39;..&#39;) {
      continue;
    }
    $arr[] = $file;
  }
  closedir($op);  //关闭目录
  echo json_encode($arr);

Copier après la connexion

Page demo.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>瀑布流</title>
  <style>
    li{
      list-style: none;
      float: left;
      margin:4px;
    }
    img{
      border:4px solid black;
    }
  </style>
</head>
<body>
  <ul id="ul">
    <!-- <li><img src="./img/1.jpg" height="300" alt=""></li> -->
  </ul>
</body>
<script>
  //找对象
  var ul = document.getElementById('ul');
  //拿数据
  function getData()
  {
    var ajax = new XMLHttpRequest();
    ajax.open('get', 'ajax.php', true);
    ajax.send();
    ajax.onreadystatechange = function()
    {
      if (ajax.readyState == 4 && ajax.status == 200) {
        var res = ajax.responseText;
        //处理结果
        var obj = JSON.parse(res);
        for (var k in obj) {
          // obj[k];
          //创建节点
          var li = document.createElement('li');
          li.innerHTML = '<img src="./img/&#39;+obj[k]+&#39;" height="300" />';
          ul.appendChild(li);
        }
      }
    }
  }
  getData();
  var timer;
  //判断滚动条的高度，加载第二批文件
  window.onscroll = function()
  {
    //获取三高
    var zGao = document.documentElement.scrollHeight;//总高度
    var lGao = document.documentElement.clientHeight;//浏览器可用高度
    var gGao = document.body.scrollTop || document.documentElement.scrollTop;//滚出去的高度
    // console.log(zGao, lGao, gGao);
    document.title = zGao + '_' + lGao + '_' + gGao;
    if (zGao - lGao - gGao < 500) {
      clearTimeout(timer);
      //用一次性定时器解决连续加载的问题
      timer = setTimeout(function(){
        getData();
      }, 200)
    }
  }
</script>
</html>

Copier après la connexion

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention. vers d'autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Comment configurer Google Chrome pour prendre en charge les requêtes AJAX du protocole de fichier

Comment utiliser php pour recevoir les soumissions ajax Données en arrière-plan

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!