搜索框 (AJAX) 不会加载请求的数据

Question

so I have a problem I can't find the error.

By default the page should load all data and when I hit search, only the requested ones (no refreshing page).

(Even better would be if I could also change the outcome/request by changing the url without having to type in in the input field:

entering url: .../searchpage.php?search=banana --> results for banana
entering url: .../searchpage.php?search=apple --> results for apple

but small steps first.)

Do you have maybe see where my problem is? Or so you know some good pages where I can find solutions/information for my problem? \

A big thankyou in advance!

index.php:

<script src="assets/js/jquery.min.js"></script>  //v3.4.1

<section class="wrapper">
   <div class="formpost">
      <div class="searchpannel">
         <input type="text" class="searchBox" name="searchBox" id="searchBox" placeholder="Search..">
         <button type="submit" id="searchBtn">SEARCH</button>
      </div>
      <div id="SearchResult"> <?php include 'startdata.php'?> </div>
   </div>
</section>
                
<script>
$(document).ready(function(){
    $('#searchdata').click(function(e){
            e.preventDefault();
            var searchtext = $('input[name=searchBox]').val();
            $.ajax({
                    type: "POST",
                    url: "fetchdata.php",
                    data: {
                            "search_post_btn": 1,
                            "searchBox": searchBox,
                    },
                    dataType: "text",
                    success: function (response) {
                            $("#SearchResult").html(response);
                    }
           })
    })
})
</script>

fetchdata.php:

<?php
$conn = mysqli_connect("localhost", "root", "");
$db = mysqli_select_db($conn, 'ajax');

if(isset($_POST['search_post_btn'])) {

   $search = $_POST['searchBox'];
   $query = "SELECT * FROM ajaxtest WHERE name LIKE '%$search%' ";
   $query_run = mysqli_query($conn,$query);

   if(mysqli_num_rows($query_run) > 0){

      WHILE ($row = mysqli_fetch_assoc($query_run)) {

         echo "<h2>Hallo, my name is ";
         echo $row['name'];
         echo "<strong>";
         echo $row['famname'];
         echo "</strong></h2><p> On the list I'm place ";
         echo $row['id'];
         echo "</p>";
       }
   }
}
?>

Answer 1

Hi you have to do some modification in your code

 $.ajax({
                type: "POST",
                url: "fetchdata.php",
                data: {
                        "search_post_btn": 1,
                        "searchBox": searchBox,
                },
                dataType: "json",
                success: function (response) {
                        $("#SearchResult").html(response);
                }
       })

----- PHP CODE ----

   <?php
  $conn = mysqli_connect("localhost", "root", "");
  $db = mysqli_select_db($conn, 'ajax');

  if(isset($_POST['search_post_btn'])) {

  $search = $_POST['searchBox'];
  $query = "SELECT * FROM ajaxtest WHERE name LIKE '%$search%' ";
  $query_run = mysqli_query($conn,$query);

  if(mysqli_num_rows($query_run) > 0){
     $design = "";
     WHILE ($row = mysqli_fetch_assoc($query_run)) {
        $design .= "<h2>Hallo, my name is ".$row['name']."<strong>".$row['famname']."</strong></h2><p> On the list I'm place ".$row['id']."</p>";
      }

      print_r(json_encode($design));
      die;
  }
 }
 ?>