Ajaxウォーターフォールフローでデモ共有を実現（コード付き）
今回は、Ajax ウォーターフォール フロー実装のデモ共有 (コード付き) をお届けします。Ajax ウォーターフォール フロー実装のデモ共有に関する 注意事項とは何ですか? ここでは実際のケースを見てみましょう。
最近、滝の流れがたくさんあると友達から聞いたので、自分で勉強しに行きました。簡単なネイティブデモをみんなと共有しています...それは、詳細なコメント付きの3つのドキュメントに分かれているだけです。 : img ;ajax.php;demo.php
画像 1.jpg をimg フォルダー 2.jpg....
ajax.php ページに配置します。 <?php
//模拟从数据库读取数据
$arr = array();
$op = opendir('./img'); //打开目录
//循环读取目录
while (($file = readdir($op)) !== false) {
//过滤点和点点
if ($file == '.' || $file == '..') {
continue;
}
$arr[] = $file;
}
closedir($op); //关闭目录
echo json_encode($arr);
<!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/'+obj[k]+'" 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>
ファイルプロトコルのAJAXリクエストをサポートするようにGoogle Chromeを設定する方法
phpを使用してajaxによってバックグラウンドに送信されたデータを受信する方法
以上がAjaxウォーターフォールフローでデモ共有を実現（コード付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7444
15
1371
52
76
11
10
6
Quark NetdiskをBaidu Netdiskに共有するにはどうすればよいですか?
Mar 14, 2024 pm 04:40 PM
Quark Netdisk と Baidu Netdisk は非常に便利なストレージ ツールですが、多くのユーザーはこれら 2 つのソフトウェアが相互運用可能かどうかを疑問に思っています。 Quark NetdiskをBaidu Netdiskに共有するにはどうすればよいですか?このサイトでは、QuarkネットワークディスクファイルをBaiduネットワークディスクに保存する方法をユーザーに詳しく紹介します。 Quark Network Disk から Baidu Network Disk にファイルを保存する方法 方法 1. Quark Network Disk から Baidu Network Disk にファイルを転送する方法を知りたい場合は、まず Quark Network Disk に保存する必要があるファイルをダウンロードして、次に開きますBaidu Network Disk クライアントを起動し、圧縮ファイルを保存するフォルダーを選択し、ダブルクリックしてフォルダーを開きます。 2. フォルダーを開いたら、ウィンドウ左上の「アップロード」をクリックします。 3. コンピュータ上でアップロードする必要がある圧縮ファイルを見つけ、クリックして選択します。
デモってどういう意味ですか？
Feb 12, 2024 pm 09:12 PM
デモという言葉は、歌うことが好きな友達にとってはもはや馴染みのない言葉ではありませんが、これまでデモに触れたことのない多くのユーザーは、デモが何を意味するのか知りたがっています。ここで編集者が持ってきたデモの意味を見てみましょう。デモとはどういう意味ですか? 回答: デモテープ。 1. デモの発音は英語では ['deməʊ]、アメリカでは ['demoʊ] です 2. デモとは「デモ」の略で、一般に正式に録音される前に曲を聴くことによる予備的な効果を指します。 3. デモは名詞としてサンプルテープやサンプルレコードを指しますが、動詞の意味は試用（特にソフトウェア）、デモンストレーション、デモンストレーションです。
NetEase Cloud Music を WeChat Moments に共有する方法_NetEase Cloud Music を WeChat Moments に共有するチュートリアル
Mar 25, 2024 am 11:41 AM
1. まず、NetEase Cloud Music に入り、ソフトウェアのホームページ インターフェイスをクリックして、曲の再生インターフェイスに入ります。 2. 次に、曲の再生インターフェイスで、下の図の赤いボックスに示すように、右上隅にある共有機能ボタンを見つけて、クリックして共有チャンネルを選択し、共有チャンネルで「共有先」オプションをクリックします。下部にある [WeChat Moments] を選択すると、コンテンツを WeChat Moments に共有できます。
Baidu Netdisk で友達とファイルを共有する方法
Mar 25, 2024 pm 06:52 PM
最近、Baidu Netdisk Android クライアントの新しいバージョン 8.0.0 がリリースされ、このバージョンには多くの変更が加えられただけでなく、多くの実用的な機能も追加されました。その中でも最も目を引くのがフォルダー共有機能の強化だ。ユーザーは簡単に友人を招待して仕事や生活で重要なファイルを共有できるようになり、より便利なコラボレーションと共有が実現します。では、友達と共有する必要があるファイルをどのように共有すればよいでしょうか? 以下では、このサイトの編集者が詳しく説明します。 1) Baidu Cloud APP を開き、まずホームページ上の関連フォルダーをクリックして選択し、次にインターフェイスの右上隅にある [...] アイコンをクリックします (以下を参照) 2) 次に、[+] をクリックします。 「共有メンバー」欄】を選択し、最後に全てにチェックを入れます
jQuery AJAX リクエストで発生した 403 エラーを解決する方法
Feb 20, 2024 am 10:07 AM
タイトル: jQuery AJAX リクエストの 403 エラーを解決する方法とコード例。403 エラーは、サーバーがリソースへのアクセスを禁止するリクエストを指します。このエラーは通常、リクエストにアクセス許可がないか、サーバーによって拒否されたために発生します。 jQueryAJAX リクエストを行うときにこのような状況に遭遇することがありますが、この記事ではこの問題の解決方法とコード例を紹介します。解決策: 権限を確認します。まず、要求された URL アドレスが正しいことを確認し、リソースにアクセスするための十分な権限があることを確認します。
jQuery AJAXリクエスト403エラーを解決する方法
Feb 19, 2024 pm 05:55 PM
jQuery は、クライアント側の開発を簡素化するために使用される人気のある JavaScript ライブラリです。 AJAX は、Web ページ全体をリロードせずに、非同期リクエストを送信し、サーバーと対話するテクノロジーです。ただし、jQuery を使用して AJAX リクエストを行うと、403 エラーが発生することがあります。 403 エラーは通常、セキュリティ ポリシーまたは権限の問題が原因で、サーバーによってアクセスが拒否されたエラーです。この記事では、jQueryAJAX リクエストで 403 エラーが発生した場合の解決方法について説明します。
Mango TV メンバーのアカウント共有 2023
Feb 07, 2024 pm 02:27 PM
Mango TV には、さまざまな種類の映画、テレビシリーズ、バラエティ番組などのリソースがあり、ユーザーはそれらを自由に選択して視聴できます。 Mango TV 会員はすべての VIP ドラマを視聴できるだけでなく、ユーザーが楽しくドラマを視聴できるように最高解像度の画質を設定することもできます。以下では、編集者がユーザーが使用できる無料の Mango TV 会員アカウントをいくつか紹介します。急いで見てください。見てください。 Mango TV 最新のメンバー アカウント無料共有 2023: 注: これらは収集された最新のメンバー アカウントです。直接ログインして使用できます。パスワードを自由に変更しないでください。口座番号: 13842025699 パスワード: qds373 口座番号: 15804882888 パスワード: evr6982 口座番号: 13330925667 パスワード: jgqae 口座番号: 1703
Ajaxを使用してPHPメソッドから変数を取得するにはどうすればよいですか?
Mar 09, 2024 pm 05:36 PM
Ajax を使用して PHP メソッドから変数を取得することは、Web 開発では一般的なシナリオであり、Ajax を使用すると、データを更新せずにページを動的に取得できます。この記事では、Ajax を使用して PHP メソッドから変数を取得する方法と、具体的なコード例を紹介します。まず、Ajax リクエストを処理し、必要な変数を返すための PHP ファイルを作成する必要があります。以下は、単純な PHP ファイル getData.php のサンプル コードです。
