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

Question

所以我有一个问题，我找不到错误。

默认情况下，页面应该加载所有数据，当我点击搜索时，只有请求的数据（没有刷新页面）。

（如果我也可以通过更改 url 而无需在输入字段中输入来更改结果/请求，那就更好了：

输入 url: .../searchpage.php?search=banana --> 香蕉的结果
输入网址：.../searchpage.php?search=apple --> 苹果的结果

但要先小步。）

你有没有看到我的问题在哪里？或者你知道一些好的页面，我可以在其中找到我的问题的解决方案/信息？ \

提前非常感谢您！

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

您好，您必须对代码进行一些修改

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

----- 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){
     $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;
  }
 }
 ?>