如何返回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;
    }); 

我希望能够从DB表中写入任何列到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 />");
} */

编辑:

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