0

スクロールイベントでデータをロードする必要があります。それを検索した後、このサイトからコードを取得しました：スクロールでデータをロードするコード。

Demo と MiscellaneousModel という名前の php の 2 つのクラスがあります。テーブルの名前を変更しただけで同じコードを使用しました。

デモ.php

<?php
  class Demo extends Controller {

function Demo(){
    parent::Controller();       
    $this->load->model('MiscellaneousModel');       
}

public function index(){
    $query = $this->MiscellaneousModel->getPhotos();
    echo json_encode (array($query));       
}
 }
?>

その他Model.php

<?php
   class MiscellaneousModel extends Model {
function MiscellaneousModel(){
    parent::Model();        
}

function getPhotos(){   
    $this->db->select("Photo_Id,url,title");
    $this->db->from('photos');              
    $query = $this->db->get();      
    return $query->result();            
}

   }
  ?>

test.php

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
p{margin: 10px;
padding: 5px;}
#finalResult{
list-style-type: none;
margin: 10px;
padding: 5px;
width:300px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="json2.js"></script>
<script>
$(document).ready(function () {
$(window).scroll(function () {          
    if ($(window).scrollTop() == ( $(document).height() - $(window).height())) {
        loadData();
    }
});

function loadData() {
    $.ajax({
        type: "post",
        url: "http://localhost/test/test.php",
        cache: false,               
        data:'',
        success: function(response){

            var obj = JSON.parse(response);
            try{
                var str = '';
                var items=[];   
                $.each(obj[0], function(i,val)
                                    {                                                           
                                                items.push($('<li/>').text(val.url));
                                                items.push($('<li/>').text(val.title));
                }); 

                $('#finalResult').fadeOut('slow', function() {
                $(this).append(str).fadeIn('slow').fadeIn(3000);
                $('#finalResult').css({backgroundColor: ''});
             $('#finalResult').append.apply($('#finalResult'),items);
                }).css({backgroundColor: '#D4ED91'});

            }catch(e) {     
                alert('Exception while request..');
            }       
        },
        error: function(){                      
            alert('Error while request..');
        }
     });


}

});
</script>
</head>
<body>      
<h1>Load data on page scroll using jQuery Php Codeigniter and Mysql  </h1>  
<ul id="finalResult">
</ul>   
</body>
</html>

私はjsonがまったく初めてです。だから、どこが間違っているのか教えてください。また、jsonで作成されたデータベースへの接続方法も知りたいです。私が言及したサイトの例では、データベースへの接続がどのように行われたか理解できませんでした。

4

1 に答える 1

2

これをファイルに保存します。dbCalls.php簡単 にするために、それを何とでも呼んでください

class db{
    protected $db = NULL;

    public function __construct(){
        $this->db = new mysqli('localhost', 'username', 'password', 'database');
    }

    public function getPhotos(){
        $stmt  = $this->db->query('SELECT Photo_Id, url, title FROM photos');

        $rows = array();
        while($row = $stmt->fetch_assoc()):
            $rows[] = $row;
        endwhile;   

        return json_encode($rows);
    }
}

次に、新しいファイルを作成します。controller.php。

include_once('dbCalls.php');
$db = new db; //instantiate class

if(!empty($_GET['getPhotos'])):
    echo $db->getPhotos(); //send the json encoded photos back
endif;

次に、ajax関数をそのように変更します。

$.ajax({
    type: "GET",
    url: "http://localhost/test/controller.php",
    cache: false,               
    data:'getPhotos=1',
    dataType:'json',
    success:function(json){
        $.each(json, function(i,row){
            //assuming your rows were just simple rows, and you used the above code..
            console.log(row.Photo_Id, row.url, row.title);
        });
    }
});

応答を操作するために使用するjQuery関数を使用して、コンソールへの呼び出しを置き換えることができます。

于 2013-01-16T07:30:51.343 に答える