从数据库中获取数据并使用ajax显示
问题描述：
我正在尝试使用keyup函数上的ajax来获取数据，但是每次获取时，都会以表格形式给出未定义的输出.我正在使用一个ID为search_data的文本字段，无论我在此文本字段中编写什么内容，输出都将显示在div中.但是我的代码以表格格式显示未定义的值.请帮助
I am trying to fetch data with ajax on keyup function, but every time I fetch it gives undefined output in tabular form. I am using one textfield with id search_data, whatever I write in this textfield, the output gets displayed in a div. But my code is displaying undefined values in tabular format. Please help
<!doctype html>
<html>
<head>
<title>Bootstrap Table</title>
<link rel="stylesheet" href="bootstrap/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css">
<script src="bootstrap/jquery-3.1.1.min.js"></script>
<script src="bootstrap/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"></script>
<style>
.container{margin:auto;}
</style>
</head>
<body>
<br />
<div class='input-group' style='margin-left:70%;'>
<input type="text" id="search_data" class="col-xs-2" placeholder="Search">
</div>
<div class="container">
</div>
<script id="source" language="javascript" type="text/javascript">
$('#output').append("<br /><h3><center>Employee Table</center></h3>");
var html = "<br /><h3><center>Employee Table</center></h3>";
$.ajax({
url: 'bootstrap_table_db1.php', data: "", dataType: 'json', success: function(rows)
{
$(".container").html(html);
}
});
var timer;
$("input").on('keyup', function()
{
var results;
clearTimeout(timer);
timer = setTimeout(function()
{
var search_data = $('#search_data').val();
if(search_data != "")
{
$.ajax(
{
type: "POST",
url: 'test2_db.php',
data: {search: search_data},
dataType: 'html',
success: function(result)
{
html+= "<div class='table-responsive'>";
html+= "<table class='table table-bordered table-striped'>";
html+= "<tr>" +
"<th>Employee Name</th>" +
"<th>Email</th>" +
"<th>Message</th>" +
"<th>Date</th>" +
"</tr>"
for (var i in result)
{
var row = result[i];
var employee_name = row[1];
var email = row[2];
var message = row[3];
var date = row[4];
html+= "<tr>" +
"<td width='25%'>" + employee_name + "</td>" +
"<td width='25%'>" + email + "</td>" +
"<td width='25%'>" + message + "</td>" +
"<td width='25%'>" + date + "</td>" +
"</tr>";
}
html+= "</table>";
html+= "</div>";
$(".container").html(html);
}
});
}
}, 1000);
});
</script>
</body>
</html>
下面给出的是我的sql代码
The given below is my sql code
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css">
<script src="bootstrap/jquery-3.1.1.min.js"></script>
<script src="bootstrap/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"></script>
</head>
<body>
<?php
mysql_connect("localhost", "root", "root") || die(mysql_error());
mysql_select_db("bijit") || die(mysql_error());
$result = mysql_query("SELECT * FROM employee ORDER BY id DESC LIMIT 5");
$data = array();
if(isset($_POST['search']) && !empty($_POST['search']))
{
$s = $_POST['search'];
if(!empty($s))
{
$result2 = mysql_query("SELECT * FROM employee WHERE Employee_name LIKE '%$s%' || Email LIKE '%$s%'|| Message LIKE '%$s%' ");
while ( $row = mysql_fetch_array($result2) )
{
$data[] = $row;
}
echo json_encode( $data );
}
}
?>
</body>
</html>
答
尝试此代码
<!doctype html>
<html>
<head>
<title>Bootstrap Table</title>
<link rel="stylesheet" href="bootstrap/bootstrap-4.0.0-alpha.6-dist/css/bootstrap.min.css">
<script src="bootstrap/jquery-3.1.1.min.js"></script>
<script src="bootstrap/bootstrap-4.0.0-alpha.6-dist/js/bootstrap.min.js"></script>
<style>
.container{margin:auto;}
</style>
</head>
<body>
<br />
<div class='input-group' style='margin-left:70%;'>
<input type="text" id="search_data" class="col-xs-2" placeholder="Search">
</div>
<div class="container">
</div>
</body>
<script type="text/javascript">
$( document ).ready(function() {
$( document ).on( "keyup",'#search_data', function() {
var results;
var search_data = $(this).val();
if(search_data != ""){
$.ajax(
{
type: "POST",
url: 'testdata.php',
data: {search: search_data},
dataType: 'json',
success: function(response){
if(response.status=="success"){
results+= "<div class='table-responsive'>";
results+= "<table class='table table-bordered table-striped'>";
results+= "<tr>" +
"<th>Employee Name</th>" +
"<th>Email</th>" +
"<th>Message</th>" +
"<th>Date</th>" +
"</tr>";
$.each(response.data, function(key,data) {
results+='<tr><td>'+data.employee+'</td><td>'+data.email+'</td><td>'+data.message+'</td><td>'+data.date+'</td></tr>';
});
results+= "</table>";
results+= "</div>";
$(".container").html(results);
}else{
$(".container").html('No Result Found');
}
}
});
}else{
$(".container").html('');
}
});
});
</script>
</html>
PHP
if(empty($data)){
$result=array('status'=>'error','data'=>$data);
}else{
$result=array('status'=>'success','data'=>$data);
}
echo json_encode($result);