javascript - PHP 中的搜索不起作用

标签 javascript php html ajax

我不太擅长 PHP 和 AJAX,我需要你们的帮助。无法使用 PHP 和 AJAX 进行简单搜索,这是我的代码。 AJAX 中的 load_data 函数正在运行,但我不确定它是否调用我的文件中的 .php 函数,但文件没有分开。

这是我的 HTML

<html>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TESTING</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
  </head>

  <body>
    <div class="container">
      <br />
      <h2 align="center">TESTING</h2>
      <br />
      <div class="form-group">
        <div class="input-group">
          <span class="input-group-addon">Search</span>
          <input type="text" name="search_text" id="search_text" placeholder="Search" class="form-control" />
        </div>
      </div>
      <br />
      <div id="result"></div>
    </div>
  </body>

</html>

这是我的 AJAX 脚本

<script>
$(document).ready(function() {

  load_data();

  function load_data(query) {
    //alert('testing');
    $.ajax({
      url: "functions.php",
      method: "POST",
      data: {
        query: query
      },
      success: function(data) {
        $('#result').html(data);
      }
    });
    // alert(query);
  }

  $('#search_text').keyup(function() {
    var search = $(this).val();
    //alert(search);
    if (search != '') {
      load_data(search);
    } else {
      load_data();
    }
  });
});
</script>

这是我的 PHP

<?php
//fetch.php
$connect = mysqli_connect("localhost", "root", "", "erpts_system");

$output = '';
if (isset($_POST["query"])) {
  $search = mysqli_real_escape_string($connect, $_POST["query"]);
  $query = "
  SELECT * FROM users
  WHERE firstname LIKE '%".$search."%'
  OR middlename LIKE '%".$search."%'
  OR lastname LIKE '%".$search."%'
  OR email LIKE '%".$search."%'
  OR username LIKE '%".$search."%'
  ";
} else {
  $query = "
  SELECT * FROM users ";
}
$result = mysqli_query($connect, $query);
if(mysqli_num_rows($result) > 0)
{
    $output .= '
    <div class="table-responsive">
       <table class="table table bordered">
       <tr>
         <th>Customer Name</th>
         <th>Address</th>
         <th>City</th>
         <th>Postal Code</th>
         <th>Country</th>
       </tr>
    ';

    while($row = mysqli_fetch_array($result))
    {
        $output .= '
        <tr>
          <td>'.$row["firstname"].'</td>
          <td>'.$row["middlename"].'</td>
          <td>'.$row["lastname"].'</td>
          <td>'.$row["email"].'</td>
          <td>'.$row["username"].'</td>
        </tr>
        ';
    }
    echo $output;
} else {
  echo 'Data Not Found';
}
?>

最佳答案

我复制了代码并在本地计算机上启动了它,它运行得非常完美。我认为你的问题来自于链接你的js文件。我还没有看到链接你的 js 文件的脚本标签。如果您不打算使用外部脚本,我建议您在文档末尾插入 javascript 代码,如下所示

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>TESTING</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
    <div class="container">
        <br />
        <h2 align="center">TESTING</h2>
        <br />
        <div class="form-group">
            <div class="input-group">
                <span class="input-group-addon">Search</span>
                <input type="text" name="search_text" id="search_text" placeholder="Search" class="form-control" />
            </div>
        </div>
        <br />
        <div id="result"></div>
    </div>


    <script>
        $(document).ready(function() {

            //load_data();

            function load_data(query) {
                //alert('testing');
                $.ajax({
                    url: "functions.php",
                    method: "POST",
                    data: {
                        query: query
                    },
                    success: function(data) {
                        $('#result').html(data);
                    }
                });
                // alert(query);
            }

            $('#search_text').keyup(function() {
                var search = $(this).val();
                //alert(search);
                if (search != '') {
                    load_data(search);
                } else {
                    load_data();
                }
            });
        });
    </script>
</body>

请注意我如何注释您在函数声明之前调用的加载函数。确保 php 文件与包含此代码的 php 文件位于同一目录中。祝一切顺利

关于javascript - PHP 中的搜索不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45666188/

相关文章:

php - 显示数据库值检索错误

php - 使用 2 个表中的一个查询删除记录时出现问题

html - stellar.js 的视差效果 - 调整大小后出现空白

javascript - 基本catch block 中未处理的Promise拒绝

php - 设置 cron 作业 php

javascript - VBScript:在 DOM 元素中使用变量

javascript - 如果另一个 div 打开如何隐藏 div 使用 javascript

javascript - jquery 验证器 onfocusout 不适用于复选框和 radio

javascript - `lazy load` 图像的最佳方法是什么,同时需要知道它们的高度和宽度?

javascript - 使用 Selenium webdriver 加载动态 url