如何检索通过AJAX使用POST方法创建的表?

如何检索通过AJAX使用POST方法创建的表?

问题描述:

当前正在我大学的最后一个项目中工作,我们的老师问我们的其中一件事是通过AJAX POST方法在单独的脚本上创建一个表格(根据用户在前一页中给出的变量进行查询并填写结果表),然后将该表返回到主页面。但到目前为止,我还没有想出一种方法来正确检索表格。如何检索通过AJAX使用POST方法创建的表?

我试过使用一个.load来带回表,但表未定义,就好像由POST所做的变量没有保存。目前我使用append将表格附加到我的主页面,但我的老师和我同意不是正确的方式,因为它不断向div添加更多表格,并且我们希望每个POST只出现一个表格。

这里的主脚本:

<!DOCTYPE html> 
<head> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
$("#buttonone").click(function(){ 
var test = $("#form input[name= yourlastnamep]").val(); 
$.post("script_02.php",{alep: test},function(data){ 
$("#xmas").append(data); 
$("#show").click(function(){ 
$("#xmas").fadeToggle(); 
}); 
}); 
}); 
}); 
</script> 
</head> 


<body> 
<form id="form"> 
<p>Find your Last Name:</p> 

<div class="form-group-register"> 
<label>Last Name:</label> 
<input type="text" class="form-control" name="yourlastnamep"> 
</div> 

<div class="form-group-register"> 
<button type="button" id="buttonone">Find me!</button> 
<button type="button" id="show">Toggle!</button> 
</div> 
</form> 
<div id="xmas"></div> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body> 

</html> 

和这里的script_02.php:

<?php 
$mysqli = new mysqli("localhost", "user", "password", "formysqli"); 
$var1 = $_POST['alep']; 
$var2 = "SELECT name, middlename, lastname, age, birth from formtable where lastname = '$var1'"; 
$result = $mysqli->query($var2); 
?> 

<table border="1"> 
<tr> 
<th>NAME</th> 
<th>MIDDLE NAME</th> 
<th>LASTNAME</th> 
<th>AGE</th> 
<th>BIRTH</th> 
</tr> 
<tr> 
<td><?php echo $row['name']; ?></td> 
<td><?php echo $row['middlename']; ?></td> 
<td><?php echo $row['lastname']; ?></td> 
<td><?php echo $row['age']; ?></td> 
<td><?php echo $row['birth']; ?></td> 
</tr> 
</table> 

感谢您的关注。

+0

我只想用PHP来查询MySQL和'回声json_encode($ assocArray);'回到你的JavaScript和建立客户端上的表。 – PHPglue

而不是

$("#xmas").append(data); 

使用

$("#xmas").html(data); 
+0

这样做,谢谢! – UselessGun