Home load posts by click
Reply: 0

load posts by click

user4782
1#
user4782 Published in April 26, 2018, 1:46 pm

I want to load posts by click, I have two files

  • index.php with ajax
  • handler.php.

I'm studying AJAX. I understand this technology so by clicking on the button an Ajax request should occur, then the handler returns the data to the Ajax request, and the Ajax query outputs this data. But I can not do it, why? How to fix the error? My error is that the posts are not loaded. The console is empty. I set the echo to the top of the handler, but it did not work. I guess the problem with ajax

index.php with ajax

<!DOCTYPE html>
<html>
    <head>
        <link href="style.css" rel="stylesheet">
        <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    </head>
    <body>
        <main>
            <!-- <article class="news">
                <div class="picture"><img src="1news.jpg" width="300" height="300"></div>
                <div class="aboutpost">
                    <h2 class="aboutpost-title">Пожар в торговом центре в Кемерово</h2>
                    <p class="aboutpost-description">Холдинг, куда входило ЧОП "Зимней вишни", прекратил работу после трагедии</p>
                </div>
            </article> -->
            <?php
                require 'infofordb.php';
                $link = mysqli_connect($host, $user, $password, $database) or die("Ошибка " . mysqli_error($link));
                $query ="SELECT * FROM news ORDER BY id DESC LIMIT 5";
                $result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link));
                $articles = array();
                while($row = mysqli_fetch_assoc($result)) {$articles[] = $row;}
                foreach($articles as $article) {echo '
            <article class="news">
                <div class="picture">
                    <img src="/image/'.$article[path].'">
                </div>
                <div class="aboutpost">
                    <h2 class="aboutpost-title">'.$article[title].'</h2>
                    <p class="aboutpost-description">'.$article[description].'</p>
                </div>
            </article>';}
            ?>
            <center><button id="load">Загрузить ещё</button></center>
            <script>
                $(document).ready(function(){
                    var inProgress = false;
                    var start = 5;
                    $('#load').click(function() {
                        $.ajax({
                            url: 'handler.php',
                            method: 'POST',
                            data: {"start" : start},
                            dataType: 'json',
                            beforeSend: function() {inProgress = true;}
                        }).done(function(data){
                            data = jQuery.parseJSON(data);
                            alert('nen');
                            if (data.length > 0) {
                                //надо вывести
                                $.each(data, function(index, data){
                                    $('main').append(
                                        '<article class="news"><div class="picture"><img src="/image/' + data.path +
                                        + '"></div><div class="aboutpost"><h2 class="aboutpost-title">' + data.title + 
                                        + '</h2><p class="aboutpost-description">' + data.description + 
                                        + '</p></div></article>');
                                });
                                inProgress = false;
                                start += 5;
                            }
                        });
                    });
                });
            </script>
        </main>
    </body>
</html>

handler.php

<?php
    include(infofordb.php);
    $start = $_POST['start'];
    $link = mysqli_connect($host, $user, $password, $database) or die("Ошибка " . mysqli_error($link));
    $query ="SELECT * FROM news ORDER BY id DESC LIMIT {$start}, 5";
    $result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link));
    $articles = array();
    while($row = mysqli_fetch_assoc($result)) {$articles[] = $row;}
    echo json_encode($articles);
?>
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.308278 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO