JS/PHP POST 到 php 数据库查询脚本

Question

我正在尝试从用户获取输入，然后 Post 将其发送到另一个 PHP 脚本以将输入用于 MariaDB 查询。

Index.php:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device.width, inital-scale=1">

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <!-- jQuery UI library -->
    <link rel="stylesheet" 
    href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <!-- Initialise autocomplete -->
    <script type="text/javascript" src="jquery.js"></script>
   
</head>

<body>
   <form>
      <input type="text" id="name" name="search" placeholder="Enter Gene Name...">
      <button id="searchBtn" type="button" name="btn" onclick="post()" >Search</button>
   </form>
      
    <script>
        function post() {
        var name = document.getElementById("name").value;

        $.ajax({
                type : "POST", 
                url  : "search.php",  
                data : { name : name},
                success: function(res){  
                        }
            });
        }
    </script>
</body>

</html>

Search.php

<?php    
$name = $_POST['name'];

echo $name;

$dbhost = 'localhost';
$dbuser = '****';
$dbpass = '****';
$conn = mysqli_connect($dbhost, $dbuser, $dbpass);

// select and print all from database
if ($conn->connect_error) {
  die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT * FROM cardiomic_database.genes WHERE gene LIKE '%".$name."%'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  // output data of each row
  while($row = $result->fetch_assoc()) {
    echo $row["gene"]. "<br>";
  }
} else {
  echo "0 results";
}
$conn->close();
?>

我认为有很多错误。这个想法是让用户在 id="name" 的文本文件中输入，该文件应该发布到 search.php 并在数据库查询中使用。我没有任何错误，只是无法正常工作。有什么建议吗？

Answer 1

我可以导出表单事件中的问题。请仅保留以下表格并删除所有其他表格，如果问题仍然存在，请告诉我。

<form>
    <input type="text" id="name" name="search" placeholder="Enter Gene Name...">
    <button id="searchBtn" type="button" name="btn" onclick="post()" >Search</button>
</form>

请尝试更新 post 功能，如下所示。

<script>
    function post() {
    var name = document.getElementById("name").value;

    $.ajax({
            type : "POST", 
            url  : "search.php",  
            data : { name : name},
            success: function(res){ 
                $("body").prepend(res); 
            }
        });
    }
</script>

Answer 2

为什么要在这里使用 ajax..?，而您可以直接将表单提交到 php 文件。

<form method="post" action="search.php">
    <input type="text" id="name" name="search" placeholder="Enter Gene Name...">
    <button id="searchBtn" type="submit" name="btn">Search</button>
</form>

如果你真的想使用 ajax 那么我在这里没有看到任何问题，但我的使用方式是。

$.post("search.php", {
           name : name
        }, function (data, status) {
        //  alert (data + '\n' + "status" + status);
            if (status === 'error') {
                console.log("error"); // For debugging purpose
            } else if (status === 'success') {
              console.log("dont");
            }
        });

JS/PHP POST 到 php 数据库查询脚本

JS/PHP POST to php script for database query

html

javascript

php

mysql

mariadb