使用 ajax 和 php 动态更改 html

Question

我正在开发我的网站。我有评论区。我想一次只展示其中两个。所以我想从数据库中获取 cmets 并在特定时间后用另一个替换（如幻灯片）。我只想显示每个用户的姓名和评论。

<div class="testimonials-item">
              <div class="user row">
                <div class="col-lg-3 col-md-4">
                  <div class="user_image">
                    <img src="assets/images/face2.jpg">
                  </div>
                </div>
                <div class="testimonials-caption col-lg-9 col-md-8">
                  <div class="user_text ">
                    <p class="mbr-fonts-style  display-7" style="margin-left: 2em">
                       <em>a comment</em>
                    </p>
                  </div>
                  <div class="user_name mbr-bold mbr-fonts-style align-right pt-3 display-7">
                       maria
                  </div>
                </div>
              </div>
            </div>

.

$sql = "select id, comment from comment where verify=1";
$res = mysqli_query($con, $sql);

如果可以的话，请帮助我。 谢谢

Answer 1

希望对您有所帮助。

index.php

<div class="testimonials-item"></div>

<form id="idForm" method="post">
    <button type="submit" name="submit">Submit</button>
</form>
   <script> 
 $("#idForm").submit(function(e) {
    e.preventDefault(); // avoid to execute the actual submit of the form.
    $.ajax({
           type: "POST",
           url: 'AjaxFile.php',
           data: {data: "someData"}, // serializes the form's elements.
           success: function(data)
           {
               //alert(data); // show response from the php script.
               $('.testimonials-item').html(data);
           }
         });
});  

    </script>

AjaxFile.php

<?php 

//$sql = "select id, comment from comment where verify=1";
//$res = mysqli_query($con, $sql);

//can you change return data
//you have multple row use while or foreach

echo '<div class="user row">
                <div class="col-lg-3 col-md-4">
                  <div class="user_image">
                    <img src="https://picsum.photos/200/300">
                  </div>
                </div>
                <div class="testimonials-caption col-lg-9 col-md-8">
                  <div class="user_text ">
                    <p class="mbr-fonts-style  display-7" style="margin-left: 2em">
                       <em>a comment</em>
                    </p>
                  </div>
                  <div class="user_name mbr-bold mbr-fonts-style align-right pt-3 display-7">
                       maria
                  </div>
                </div>
              </div>';
echo '<div class="user row">
                <div class="col-lg-3 col-md-4">
                  <div class="user_image">
                    <img src="https://picsum.photos/seed/picsum/200/300">
                  </div>
                </div>
                <div class="testimonials-caption col-lg-9 col-md-8">
                  <div class="user_text ">
                    <p class="mbr-fonts-style  display-7" style="margin-left: 2em">
                       <em>B comment</em>
                    </p>
                  </div>
                  <div class="user_name mbr-bold mbr-fonts-style align-right pt-3 display-7">
                       Beta
                  </div>
                </div>
              </div>';            
?>