使用ajax和php動態更改html

Question

我正在開發我的網站。 我有評論區。 我想一次只展示其中的兩個。 所以我想從數據庫中獲取評論並在特定時間后用另一個替換（如幻燈片）。 我只想顯示每個用戶的姓名和評論。

<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>';            
?>