使用 PHP 和 MySQL 的实时搜索,无需刷新页面
Live Search with PHP and MySQL without page refresh
我正在尝试 live search
。我有一个带有输入值的 html 页面。输入将采用 saleID。然后我有一个连接到 MySQL 数据库的 php 文件。我想通过销售 ID 搜索数据库,并根据输入的内容更新 html table。我有大部分代码,但是它说什么都没有找到。
首先我会给出我的 HTML:=
<html>
<head>
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function ()
{
load_data();
function load_data(query)
{
$.ajax({
url:"test.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#saleID').keyup(function()
{
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
</head>
<body>
</body>
</html>
<h1>Test</h1>
<br>
<br>
<form>
<p>Customer ID:</p>
<input type="text" id="saleID" name="Sale">
<br>
<br>
</form>
<div id="result"></div>
</body>
</html>
然后这是我的 test.php
文件
<?php
header("Cache-Control: post-check=1, pre-check=2");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
$choice = $_GET['qu'];
$output = '';
$con = mysqli_connect("localhost", "milkiewiczr520", "", "milkiewiczr520") or
die("Failed to connect to database");
$sql_command = "SELECT * FROM SALES WHERE CUSTOMERID = " . $choice . ";";
$result = mysqli_query($con, $sql_command);
if(mysqli_num_rows($result) > 0)
{
$output .= '
<div>
<table>
<tr>
<th>Sale ID</th>
<th>Sale Date</th>
<th>Customer ID</th>
</tr>
';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["SALEID"].'</td>
<td>'.$row["SALEDATE"].'</td>
<td>'.$row["CUSTOMERID"].'</td>
</tr>
';
}
echo $output;
}
else
{
echo 'Data Not Found';
}
?>
我没有找到任何数据。
有什么想法吗?
您使用 $_GET
获取数据,而您使用 POST 发送数据。以这种方式获取您的查询:
$choice = $_POST['query']; // the {query:query} parameter you declared in your ajax call
(而不是:$choice = $_GET['qu'];
)
对了,请尝试使用PDO做更安全的请求。
我正在尝试 live search
。我有一个带有输入值的 html 页面。输入将采用 saleID。然后我有一个连接到 MySQL 数据库的 php 文件。我想通过销售 ID 搜索数据库,并根据输入的内容更新 html table。我有大部分代码,但是它说什么都没有找到。
首先我会给出我的 HTML:=
<html>
<head>
<title></title>
<script src="jquery-1.11.1.js"></script>
<script>
$(document).ready(function ()
{
load_data();
function load_data(query)
{
$.ajax({
url:"test.php",
method:"POST",
data:{query:query},
success:function(data)
{
$('#result').html(data);
}
});
}
$('#saleID').keyup(function()
{
var search = $(this).val();
if(search != '')
{
load_data(search);
}
else
{
load_data();
}
});
});
</script>
</head>
<body>
</body>
</html>
<h1>Test</h1>
<br>
<br>
<form>
<p>Customer ID:</p>
<input type="text" id="saleID" name="Sale">
<br>
<br>
</form>
<div id="result"></div>
</body>
</html>
然后这是我的 test.php
文件
<?php
header("Cache-Control: post-check=1, pre-check=2");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
$choice = $_GET['qu'];
$output = '';
$con = mysqli_connect("localhost", "milkiewiczr520", "", "milkiewiczr520") or
die("Failed to connect to database");
$sql_command = "SELECT * FROM SALES WHERE CUSTOMERID = " . $choice . ";";
$result = mysqli_query($con, $sql_command);
if(mysqli_num_rows($result) > 0)
{
$output .= '
<div>
<table>
<tr>
<th>Sale ID</th>
<th>Sale Date</th>
<th>Customer ID</th>
</tr>
';
while($row = mysqli_fetch_array($result))
{
$output .= '
<tr>
<td>'.$row["SALEID"].'</td>
<td>'.$row["SALEDATE"].'</td>
<td>'.$row["CUSTOMERID"].'</td>
</tr>
';
}
echo $output;
}
else
{
echo 'Data Not Found';
}
?>
我没有找到任何数据。
有什么想法吗?
您使用 $_GET
获取数据,而您使用 POST 发送数据。以这种方式获取您的查询:
$choice = $_POST['query']; // the {query:query} parameter you declared in your ajax call
(而不是:$choice = $_GET['qu'];
)
对了,请尝试使用PDO做更安全的请求。