Infinite Scroll To Load More Content in Webpage Using Ajax,

发布时间：2020-12-16 00:32:07 所属栏目：百科来源：网络整理

导读：are on facebook Share on twitter Share on Share on pinterest_share e Sharing Service Now a days in most all shopping website like flipkart or any other,you can see that product or data is loading in to website when you scroll mouse. You wa

are on facebook Share on twitter Share on Share on pinterest_share e Sharing Service

Now a days in most all shopping website like flipkart or any other,you can see that product or data is loading in to website when you scroll mouse.

You want to know how its possible with PHP,well here is the simple example that how you can add infinite load content into your webpage,

Take a look at simple code and you can also download code,

How it works

I’ve created a little plugin that allows us to accomplish our goal. Simply put the plugin checks if the user is at the bottom of the container you specify and loads more content accordingly. Then this data is sent to an ajax file which processes what posts to show.

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
         11 
       
         12 
       
         13 
       
         14 
       
         15 
       
         16 
       
         17 
       
         18 
       
         19 
       
        // Check the user is at the bottom of the element 
       
        if 
        ( 
        $ 
        ( 
        window 
        ) 
        . 
        scrollTop 
        ( 
        ) 
          
        + 
          
        $ 
        ( 
        window 
        ) 
        . 
        height 
        ( 
        ) 
          
        > 
          
        $ 
        this 
        . 
        height 
        ( 
        ) 
          
        && 
          
        ! 
        busy 
        ) 
          
        { 
       
        // Now we are working,so busy is true 
       
        busy 
          
        = 
          
        true 
        ; 
       
        // Tell the user we're loading posts 
       
        $ 
        this 
        . 
        find 
        ( 
        '.loading-bar' 
        ) 
        . 
        html 
        ( 
        'Loading Posts' 
        ) 
        ; 
       
        // Run the function to fetch the data inside a delay 
       
        // This is useful if you have content in a footer you 
       
        // want the user to see. 
       
        setTimeout 
        ( 
        function 
        ( 
        ) 
          
        { 
       
        // This is the Ajax function 
       
        getData 
        ( 
        ) 
        ; 
       
        } 
        , 
          
        $ 
        settings 
        . 
        delay 
        ) 
        ; 
       
        }

The key line here is

This is basically saying,if the user scroll position is greater than the height of the element targeted,then more elements should be loaded.

What is Ajax?

Ajax is how we send data to files when an event happens in javascript. For example,when we scroll we want to send some data to another file to figure out what to do. That file is usually a PHP file which willprocessthe data sent,and then you can do something like grab information from a database. So how do we do this with jQuery? Since we’re posting data,we use the$.postfunction. It looks a little like this:

$ . post ( 'file.php' , {

information: 'to be sent' ,

to : 'file'

} , function ( data ) {

}

} ) ;

So in the above example we end the information (thats the bit inside the first set of curly brackets) to the file,file.php. When the information is sent it will return some information in the form of a data variable,and we can then use that data to return information to the user via Javascript.

The ajax file

The ajax file is going to have to be customized to fit your needs. All you have to do is grab some information from the MySQL database of your choice with some PHP. I have created a very basic ajax.php file that grabs information from a wordpress MySQL database and displays the content with the title and link. It looks a little like this,but it will be included with the download files in the download link above.

 
        <?php 
       

          
       
 
        mysql_connect 
        ( 
        'localhost' 
        , 
          
        'username' 
        , 
          
        'password' 
        ) 
          
        or 
          
        die 
        ( 
        ) 
        ; 
       
 
        mysql_select_db 
        ( 
        'database' 
        ) 
        ; 
       

          
       
 
        $offset 
          
        = 
          
        is_numeric 
        ( 
        $_POST 
        [ 
        'offset' 
        ] 
        ) 
          
        ? 
          
        $_POST 
        [ 
        'offset' 
        ] 
          
        : 
          
        die 
        ( 
        ) 
        ; 
       
 
        $postnumbers 
          
        = 
          
        is_numeric 
        ( 
        $_POST 
        [ 
        'number' 
        ] 
        ) 
          
        ? 
          
        $_POST 
        [ 
        'number' 
        ] 
          
        : 
          
        die 
        ( 
        ) 
        ; 
       

          
       
 
        $run 
          
        = 
          
        mysql_query 
        ( 
        "SELECT * FROM content WHERE status = 'active' ORDER BY id DESC LIMIT " 
        . 
        $postnumbers 
        . 
        " OFFSET " 
        . 
        $offset 
        ) 
        ; 
       

          
       
 
        while 
        ( 
        $row 
          
        = 
          
        mysql_fetch_array 
        ( 
        $run 
        ) 
        ) 
          
        { 
       

          
       
 
         
        $content 
          
        = 
          
        substr 
        ( 
        strip_tags 
        ( 
        $row 
        [ 
        'content' 
        ] 
        ) 
        , 
          
        0 
        , 
          
        500 
        ) 
        ; 
       

          
       
 
         
        echo 
          
        '<h1><a href="' 
        . 
        $row 
        [ 
        'id' 
        ] 
        . 
        '">' 
        . 
        $row 
        [ 
        'title' 
        ] 
        . 
        '</a></h1><hr />' 
        ; 
       
 
         
        echo 
          
        '<p>' 
        . 
        $content 
        . 
        '...</p><hr />' 
        ; 
       

          
       
 
        } 
       

          
       
 
        ?> 
       

Using the Plugin

Once you have your ajax file sorted out,its just a case of running the plugin. There are a bunch of variables you can determine,but it’s important that you define the query if you’re using the original ajax.php file listed above.

To run the plugin just upload all the files and create a container in your HTML called#contentor whatever you want to call your container. Then run the plugin on that. Easy!

In the download you’ll find the files necessary to do everything I’ve shown you. Since I can’t include database details you will have to supply your own which you can edit in the ajax.php file. And that’s it! Have a good day!

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!