ファイルを変更すると、「詳細をロード」ボタンをクリックすると、ブラウザはリスト内のデータベースから次の項目を動的に追加します

Question

「詳細をロード」ボタンをクリックするとファイルを変更する方法動的リスト

のindex.php

<?php 
include('pdo.php'); 
include('item.php'); 
include('loadMore.php'); 
?> 
<div id="container"> 
    <?php foreach ($items as $item): ?> 
     <div class="single-item" data-id="<?= $item->id ?>"> 
      <?= $item->show() ?> 
     </div> 
    <?php endforeach; ?> 
</div> 
<button id="loadMore">Загрузить ещё...</button> 

<script src="/jquery-1.11.3.min.js"></script> 
<script src="/script.js"></script> 

item.php

<?php 
class Item 
{ 
    public $id; 
    public $text; 

    function __construct($id = null, $text = null) 
    { 
     $this->id = $id; 
     $this->text = $text; 
    } 


    public function show() 
    { 
     return $this->text; 
    } 
} 

loadmore.php

でデータベースから次のエントリを追加します

<?php 
$offset = 0; 
$limit = 10; 
$statement = $pdo->prepare('SELECT * FROM credit LIMIT ?, ?'); 
$statement->bindValue(1, $offset, PDO::PARAM_INT); 
$statement->bindValue(2, $limit, PDO::PARAM_INT); 
$statement->execute(); 
$data = $statement->fetchAll(); 
$items = []; 
foreach ($data as $item) 
{ 
    $items[] = new Item($item['id'], $item['tel']); 
} 

pdo.php

<?php 
    $host = '127.0.0.1'; 
    $db = 'test'; 
    $user = 'root'; 
    $pass = ''; 
    $charset = 'utf8'; 
    $dsn = "mysql:host=$host;dbname=$db;charset=$charset"; 
    $opt = [ 
     PDO::ATTR_ERRMODE   => PDO::ERRMODE_EXCEPTION, 
     PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, 
     PDO::ATTR_EMULATE_PREPARES => false, 
    ]; 
    $pdo = new PDO($dsn, $user, $pass, $opt); 

script.jsあなたは「負荷より」ボタンをクリックするとブラウザが動的から次のエントリを追加するようにファイルを変更する方法

function getMoreItems() { 
    var url = "/loadMore.php"; 
    var data = { 
     // 
    }; 

    $.ajax({ 
     url: url, 
     data: data, 
     type: 'get', 
     success: function (res) { 
      // 
     }, 
     error: function (XMLHttpRequest, textStatus, errorThrown) { 
      // 
     } 
    }); 
} 

リスト内のデータベース

2時間と私は理解できません。 ヘルプ。（

Answer 1

私はあなたの混乱を理解し、私はindex.phpの中にPHPコードを使用すると、AJAXを使用してloadMore.phpを呼び出した後、正常に動作しませんなぜあなたは迷っていると信じています。

あなたが必要とする1つの区別がありますサーバー側とクライアント側のコードの違い

PHPはサーバー側でのみ実行されることを意味するサーバー側のプログラミング言語です。 、またはjson、テキスト、または何かをブラウザに送り、レスポンスがブラウザに到着すると、PHPコードを忘れることがあります。

Javascriptは、クライアント側のプログラミング言語です（少なくともあなたの場合）。ブラウザ上で実行されます。望ましい選択肢であるjQueryのを使用して、その上にいくつかのJSONとループを返送する

1. が、私はそれがより多くの作業が必要恐れる：

   あなたは基本的に2つのオプションがあります。

2. $.ajax({ 
       url: url, 
       data: data, 
       type: 'get', 
       success: function (res) { 
        $('#container').append(res); 
       }, 
       error: function (XMLHttpRequest, textStatus, errorThrown) { 
        // 
       } 
   }); 
   

   がvar url = "async.php";を忘れないでください、あなたの成功コールバックに追加する最初のあなたのjsで

<?php 
include('pdo.php'); 
include('item.php'); 
include('loadMore.php'); 
?> 

<?php foreach ($items as $item): ?> 
    <div class="single-item" data-id="<?= $item->id ?>"> 
     <?= $item->show() ?> 
    </div> 
<?php endforeach; ?> 

async.phpというファイルを作成し、HTMLを返送し、自分のページに追加します

Answer 2

まず、ボタンonclick=""の属性をajax-methodで指定する必要があります。

<button ... onclick="getMoreItems">...</button> 

第2に、あなたのloadmore。それが依存require_onceファイルにPHPの必要性：

require_once('pdo.php'); 
require_once('item.php'); 

第三に、あなたはパラメータとして制限に呼び出すことができますpdo.phpファイル内の関数にデータベースを照会するため、すなわち

function getData($offset = 0, $limit = 10){ 
    //logic 
} 

をあなたのロジックを分離

ファイルが複数回読み込まれないようにするには、常にrequire_onceまたはinclude_onceを使用してください。

コンテナdivの前にindex.phpの関数getData(...)を呼び出すと、初期データを読み込み、include.logpからindex.phpへのインクルードを削除し、loadmore.phpでパラメータを使用するロジックを書き込むことができます次のデータを取得するためにWebページから送信されます。

あなたのajaxのdata:...は、取得したい「ページ」に沿って渡す必要があります。これはおそらく、何回多く読み込んだかを示すカウンタです。 loadmore.phpスクリプトでは、オフセットを取得するためにページを限度で掛けるだけです。

データをJSONとしてajaxに返し、JSONを解析して、各項目に新しいdivを作成し、javascriptを使用して各divをcontainer-divに追加することができます。

ここではすべてのトピックについて詳しく説明していませんが、少なくともGoogleで検索するチュートリアルを知っているでしょう:)