我试图在keyup函数上使用ajax获取数据，但每次获取它时都会以表格形式给出未定义的输出。我正在使用一个id为search_data的文本字段，无论我在这个文本字段中写什么，输出都显示在div中。但我的代码以表格格式显示未定义的值。请帮忙
<!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代码
<!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>
答案 0 :(得分：2)
试试此代码
<!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>
if(empty($data)){
$result=array('status'=>'error','data'=>$data);
}else{
$result=array('status'=>'success','data'=>$data);
}
echo json_encode($result);
答案 1 :(得分：0)
将您的 dataType ajax选项从dataType: 'html'更改为dataType: 'JSON'。
因为您在响应之前对结果执行了json_encode()，并且您必须在ajax成功回调中获得 json 。
答案 2 :(得分：0)
如果您想fetch data and display via PHP and Ajax。然后，您必须遵循此代码策略。希望对您有帮助。我真的很努力。
<?php
//fetch.php
include("config.php");
$column = array("fname", "lname");
$query = "
SELECT * FROM persons WHERE
";
if(isset($_POST["is_days"]))
{
$query .= "date BETWEEN CURDATE() - INTERVAL ".$_POST["is_days"]." DAY AND CURDATE() AND ";
}
if(isset($_POST["search"]["value"]))
{
$query .= '(fname LIKE "%'.$_POST["search"]["value"].'%" ';
$query .= 'OR fname LIKE "%'.$_POST["search"]["value"].'%") ';
}
if(isset($_POST["order"]))
{
$query .= 'ORDER BY '.$column[$_POST['order']['0']['column']].' '.$_POST['order']['7']['dir'].' ';
}
else
{
$query .= 'ORDER BY id DESC ';
}
$query1 = '';
if($_POST["length"] != -1)
{
$query1 .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
}
$number_filter_row = mysqli_num_rows(mysqli_query($mysqli, $query));
$result = mysqli_query($mysqli, $query . $query1);
$data = array();
while($row = mysqli_fetch_array($result))
{
$sub_array = array();
$sub_array[] = $row["fname"].' '.$row["lname"];
$data[] = $sub_array;
}
function get_all_data($mysqli)
{
$query = "SELECT * FROM persons";
$result = mysqli_query($mysqli, $query);
return mysqli_num_rows($result);
}
$output = array(
"draw" => intval($_POST["draw"]),
"recordsTotal" => get_all_data($mysqli),
"recordsFiltered" => $number_filter_row,
"data" => $data
);
echo json_encode($output);
?>
您可以根据需要进行自定义并获取数据。此代码包括Filter data by N days。您可以按天过滤数据。