Bladephp: Now with 8+ codeigniter, php, and laravel project 8+ php project From $37/Month From Rs. 2499/Month

How to Make Load More Results From Database using jQuery,Ajax,PHP and MySQL

by
Category:php
php ajax mysql jquery html
How to Make Load More Results From Database using jQuery,Ajax,PHP and MySQL

In this tutorial, we will show you how to build a similar technique for load more data on click from the database using jQuery, Ajax, and PHP. Our Ajax based load more results with jQuery tutorial make the whole process simple. Let’s start the load more data from database tutorial. You may also like Contact Form Web Application Tutorial Ajax HTML5 PHP.

HTML, jQuery and PHP Code

<?php
define('DB_SERVER', "localhost");
define('DB_USER', "root");
define('DB_PASS', "");
define('DB_DATABASE', "whatsappdwld_db");
$con = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);
?>


<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script type="text/javascript">
            $(document).ready(function () {
                $("#load").click(function () {
                    loadmore();
                });
            });

            function loadmore()
            {
                var val = document.getElementById("result_no").value;
                $.ajax({
                    type: 'post',
                    url: 'getrecord.php',
                    data: {
                        getresult: val
                    },
                    success: function (response) {
                        var content = document.getElementById("result_para");
                        content.innerHTML = content.innerHTML + response;
                        document.getElementById("result_no").value = Number(val) + 2;
                    }
                });
            }
        </script>

    </head>

    <body>

    <center>
        <p id="heading">How to Make Load More Results From Database using jQuery,Ajax,PHP and MySQL</p>
        <div id="content">
            <div id="result_para">
                <?php
                $select = mysqli_query($con, "SELECT * FROM language limit 0,2");
                while ($row = mysqli_fetch_assoc($select)) {
                    echo "<p class='result'>" . $row['name'] . "<br>" . $row['description'] . "</p>";
                }
                ?>
                <input type="hidden" id="result_no" value="2">
                <input type="button" id="load" value="Load More Results">
            </div>
        </div>
    </center>

</body>
</html>

PHP Code (getrecord.php)

<?php
    define('DB_SERVER', "localhost");
    define('DB_USER', "root");
    define('DB_PASS', "");
    define('DB_DATABASE', "whatsappdwld_db");
    $con = mysqli_connect(DB_SERVER, DB_USER, DB_PASS, DB_DATABASE);

    $no = $_POST['getresult'];
    $select = mysqli_query($con,"SELECT * language LIMIT $no,2");
    while ($row = mysqli_fetch_assoc($select)) {
        echo "<p class='result'>" . $row['name'] . "<br>" . $row['description'] . "</p>";
    }
?>

0 Comments


Html code work in comment box


Related Post