使用 javascript 和 php 循环 Div答案

【问题标题】：Loop Div using javascript and php使用 javascript 和 php 循环 Div
【发布时间】：2020-02-06 03:37:41
【问题描述】：

我有两个文件，1 个 html 和 1 个 php。我想将数据从 php 文件加载到我的 html 文件中我的php文件代码

    include_once("db.php");
    $query ="select b.ID,b.title,b.description, b.image,b.publish_date,u.fullname from c_blog b left join user u on b.publish_by=u.loginid order by b.publish_date desc ";
    $result = mysqli_query($con,$query);
    foreach($result as $data) {
        //echo $data["image"].'---';
        echo '  <div class="blog-post">
        <div class="post-image">
            <a href="blog-single.html"><img src="blogimage/'.$data["image"].'" width="400" height="400" alt=""> </a>
        </div>
        <ul class="post-meta">
            <li class="post-author">by '.$data["fullname"].'</li>
            <li><i class="icon icon-clock"></i>'.$data["publish_date"].'</li>
            <li><i class="icon icon-talk"></i></li>
        </ul>
        <div class="inside">
            <h2 class="post-title"><a href="blog-single.html">'.$data["title"].'</a></h2>
            <div class="post-teaser">
                <p>'.$data["description"].'</p>
            </div>
        </div>
    </div>';
    }
    ?>

我的html文件代码是

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"
    type="text/javascript"></script>
    <script>
        function onPageLoad() {
            //alert("testing");
            loadpost();

        }
        function loadpost(){
            $.ajax({          
                    type: "POST",
                    url: "loadpost.php",
                    data:'',
                    success: function(data){
                    $("#blogpost").load(data);
                    //alert(data);
                }
            });

        }

    </script>
</head>

<body onload="onPageLoad();" class="home layout-2">

    <div id="page-content">
        <div class="container">
            <h1 class="text-center">Blog <span class="color">Posts</span></h1>
            <div class="row">
                <div class="col-md-9 column-center">
                    <div id="blogpost" name="blogpost">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

我想从数据库中加载数据并在 div 中循环打印。我的 PHP 代码正在工作并打印 div。但我不知道如何将 php echo 结果打印到我的 html 页面。

提前致谢

【问题讨论】：

您好。检查 jQuery 加载函数的文档：api.jquery.com/load 我想你可以只做$("#blogpost").html(data);
感谢您的回复

标签： javascript php html ajax syntax

【解决方案1】：

在您的 PHP 文件中，将您要回显的元素放入一个变量中。你应该只回显一次。所以试试这个....

include_once("db.php");
$output = '';
$query ="select b.ID,b.title,b.description, b.image,b.publish_date,u.fullname from c_blog b left join user u on b.publish_by=u.loginid order by b.publish_date desc ";
$result = mysqli_query($con,$query);
foreach($result as $data) {
    //echo $data["image"].'---';
    $output .= '  <div class="blog-post">
    <div class="post-image">
        <a href="blog-single.html"><img src="blogimage/'.$data["image"].'" width="400" height="400" alt=""> </a>
    </div>
    <ul class="post-meta">
        <li class="post-author">by '.$data["fullname"].'</li>
        <li><i class="icon icon-clock"></i>'.$data["publish_date"].'</li>
        <li><i class="icon icon-talk"></i></li>
    </ul>
    <div class="inside">
        <h2 class="post-title"><a href="blog-single.html">'.$data["title"].'</a></h2>
        <div class="post-teaser">
            <p>'.$data["description"].'</p>
        </div>
    </div>
</div>';
}

echo $output;
    ?>

在你的 ajax 成功函数中，输入：

$("#blogpost").html(data);

【讨论】：