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 ); 
 
 ?> 

我想在我的index.html 页面上的结果div 中显示这些数据。我最终会想用图表替换这些数据，但一次一步。我正在努力理解数据如何在 Ajax 和 php 之间传递。这是我的 jquery/ajax:

$('#btn_search').click(function(){ 
        txt_search = $('#txt_search').val(); 
        $.ajax({                                       
          url: './php/search.php',                  //the script to call to get data           
          data: {search: txt_search},                        //you can insert url argumnets here to pass to api.php for example "id=5&parent=6" 
          dataType: 'json',                //data format       
          success: function(rows)          //on recieve of reply 
          { 
           $('#result').append(rows);  
          }  
        }); return false; 
    });  

我希望能够将数据库表中的任何列写入 div，显示尽可能多的行。我最初使用的以下内容不太有效(仅显示 2 行..我可以明白为什么(我认为对数组理解很差):

/*for (var row in rows) 
{ 
    var COLUMN1 = rows[1]; 
    var COLUMN2 = rows[2]; 
    $('#result').append("<b>COLUMN1 </b>"+COLUMN1 e+"<b> COLUMN2: </b>"+COLUMN2).append("<hr />"); 
} */ 

编辑: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> 

无论如何，我有一个名为 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 ); 
 
 ?> 

请您参考如下方法:

在此特定示例中，只是为了演示您可以通过在成功函数中使用它来更改 #result div 的内容:

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

但通常您会在 search.php 文件中创建一些 HTML 结构并动态生成一些 HTML，然后将目标 #result div 替换为 search.php 返回的内容。

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

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