无法使用AJAX显示数据并分配给HTML中的某些Div

时间:2019-02-11 15:09:47

标签: javascript php jquery html ajax

使用搜索按钮时,使用AJAX请求显示数据时出现问题。我手动测试了searchuser.php,它显示了正确的结果。但是,当我将请求传递到AJAX时,我的html中没有显示。我想使用此功能将searchuser.php中的所有数据显示到html table代码中。

<table class="view_users" id="show_users">
</table>

在这里,我想在表ID的ID中显示以上show_users中的所有数据。但是当我尝试时仍然没有结果。使用AJAX请求有什么问题吗?请帮忙。

例如,代码如下:

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>...</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>

      <form method="post">
        <input type="text" name="searchtypeuser" placeholder="Search..." class="searchtext">
        <input type="submit" name="submit" class="searchuser" id="usersearching" value="Search">
      </form>

<div class="user_list">
        <table class="view_users" id="show_users">
        </table>
      </div>

</body>
<script src="js/jquery-2.1.1.min.js"></script>
</html>

PHP

<?php
include "includes/connection.php";

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

  $searchuser = mysqli_real_escape_string($connection, $_POST['searchtypeuser']);
  $searchuser = preg_replace("#[^0-9a-z]#i","",$searchuser);

  $sql = $connection->prepare("SELECT * FROM user WHERE firstname LIKE '%$searchuser%' or lastname LIKE '%$searchuser%'");
  $sql->execute(); // execute query
  $result = $sql->get_result(); // fetch result

  if ($result->num_rows > 0) {
      echo "<tr><th>User ID</th><th>Email</th><th>Fullname</th><th>Phone Number</th></tr>";
      // output data of each row
      while($row = $result->fetch_assoc()) {
          echo "<tr><td>" .$row["id"]. "</td><td>" .$row["email"]. "</td><td>" .$row["lastname"]. ", " .$row["firstname"]. "</td><td>" .$row["phonenumber"]. "</td></tr>";
      }
  } else {
      echo "0 results";
  }

}

?>

AJAX / JS

$(document).ready(function () {
  $("#usersearching").click(function () {
    $.ajax({
      method: "post",
      url: "searchuser.php",
      data: $('#show_users').serialize(),
      dataType: "html",
      success: function (response) {
        $("#show_users").html(response);
      }
    });
  });

});

0 个答案:

没有答案