Javascript 如何在不刷新的情况下将mysql数据返回网页（ajax/jquery/php/mysql）

昨晚我又问了一个问题，但后来我看到mysql被弃用了，于是我改用了mysqli。无论如何，我在search.php文件中有以下php——我保留了一些在我上次尝试时有效的注释

// Get all records
while ( $row = $results->fetch_assoc())
{
  //$data[] = $row;
  echo ('COLUMN1:'.$row["COLUMN1"]);
  echo ('COLUMN2:'.$row["COLUMN2"]);
  echo ('COLUMN3:'.$row["COLUMN3"]);
  echo ('<br>');
}
$mysqli->close();
//echo json_encode( $data );

 ?>

我希望能够将DB表中的任何列写入div，显示尽可能多的行。我最初使用的是以下不太有效的方法（仅显示2行..我可以理解原因（我认为对数组的理解很差）：

/*for（行中的变量行）
{
var COLUMN1=行[1]；
var COLUMN2=行[2]；
$（“#result”）.append（“COLUMN1”+column1e+”COLUMN2:“+COLUMN2”）.append（
）；
} */

编辑：HTML

<div id="main">
  <form id="search_form" role="form" action="" method="post">
    <div class="form-group">
  <input type="text" class="form-control" name="txt_search" id="txt_search" placeholder="Enter name here" autocomplete="off" >
  <p></p>
  <button type="submit" id="btn_search" class="btn btn-default">Retrieve </button>
</div>
  </form>
  <div class="result" id="result">this accessed by jquery and will be replaced</div>
  /div>

检索
jquery可以访问它，它将被替换
/div>

不管怎样，我有一个名为result的div，我现在想用一个结果表填充它。有人能回答并帮助我更好地理解它吗（我发现这类事情有一个问题，网上有数百个例子，没有解释他们为什么做这些事情，而且所有的例子都不同）

编辑2：删除，编辑3包含更好的代码：

将3:HTML编辑为变量：

$HTML = "<table border='1' >";
$HTML .= "<tr>";
$HTML .= "<td align=center> <b>Column1</b></td>";
$HTML .= "<td align=center><b>Column2</b></td>";
$HTML .= "<td align=center><b>Column3</b></td>";

// Get all records
while ( $row = $results->fetch_assoc())
{

    $HTML .= '<tr>';
    $HTML .= '<td align=center>'.$row["COLUMN1"].'</td>';
    $HTML .= '<td align=center>'.$row["COLUMN2"].'</td>';
    $HTML .= '<td align=center>'.$row["COLUMN3"].'</td>';
    $HTML .= '</tr>';
}
$mysqli->close();
$HTML .=  "</table>";
echo $HTML;

echo json_encode( $HTML );

 ?>

$HTML=”“；
$HTML.=”；
$HTML.=“Column1”；
$HTML.=“Column2”；
$HTML.=“Column3”；
//获取所有记录
而（$row=$results->fetch_assoc（））
{
$HTML.=''；
$HTML.=''.$row[“COLUMN1”].'；
$HTML.=''.$row[“COLUMN2”].'；
$HTML.=''.$row[“COLUMN3”].'；
$HTML.=''；
}
$mysqli->close（）；
$HTML.=”；
echo$HTML；
echo json_encode（$HTML）；
?>

在此特定示例中，仅为了演示您可以通过在成功函数中使用此选项来更改#result div的内容：

$('#result').html(rows); 

但通常情况下，您会在search.php文件中创建一些HTML结构，动态生成一些HTML，然后用search.php返回的替换target#result div

您还需要将index.html的文件扩展名更改为index.php

---

编辑：原因是删除了数据类型：json。

也显示您的标记。通过ajax调用php文件。它会工作，我（我认为）：url:“./php/search.php”，但不幸的是，它在index.html上没有做任何事。我使用的是Fiddler，看起来数据正在返回（我可以看到search.php正在被调用）但是它没有被显示-我的ajax/jquery的成功部分是错误的？谢谢，我已经尝试过了-我已经编辑了我的原始帖子，稍后我尝试简单地在div中添加一个表。我应该“回应”什么作为对search.php结尾的回应，是否正确？是的，您现在正处于正确的轨道上，但几乎不需要做任何修改。是的，您将在结束时回显HTML，但仅在完成处理后回显一次。因此，最好像您当前所做的那样，通过连续串联将所有HTML存储在一个变量中，并在结束时回显变量。我已将其更改为上面的第三个编辑，但它仍然没有将数据拉入index.php…如果我直接调用search.php，效果很好，我可以看到包含所有结果的表，但不幸的是ajax没有显示它？编辑我发现了问题，如果我将ajax更改为不使用Json的数据类型，它将显示数据。哦，是的。你也不需要在php代码中回显json_enchode（$HTML）。干杯！

$HTML = "<table border='1' >";
$HTML .= "<tr>";
$HTML .= "<td align=center> <b>Column1</b></td>";
$HTML .= "<td align=center><b>Column2</b></td>";
$HTML .= "<td align=center><b>Column3</b></td>";

// Get all records
while ( $row = $results->fetch_assoc())
{

    $HTML .= '<tr>';
    $HTML .= '<td align=center>'.$row["COLUMN1"].'</td>';
    $HTML .= '<td align=center>'.$row["COLUMN2"].'</td>';
    $HTML .= '<td align=center>'.$row["COLUMN3"].'</td>';
    $HTML .= '</tr>';
}
$mysqli->close();
$HTML .=  "</table>";
echo $HTML;

echo json_encode( $HTML );

 ?>

$('#result').html(rows);