Question

我需要在滚动事件上加载数据。搜索完成后，我从此网站获得了一个代码：Code to load data on scroll.

他们在php中有两个名为Demo和MiscellaneousModel的类。我使用相同的代码只更改了表的名称。

Demo.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));       
}
 }
?>

MiscellaneousModel.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中建立与数据库的连接。我的意思是在我提到的网站上的示例中，我无法理解如何与数据库建立连接。

Answer 1

将其保存在文件中。不管怎样，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函数将该调用替换到控制台。

在滚动事件上使用json加载数据

1 个答案: