如何在没有刷新的情况下将mysql数据返回到网页(ajax / jquery / php / mysql)

时间:2014-06-01 09:58:34

标签: javascript php jquery ajax

昨晚我设法得到了另一个问题,但后来我读到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 />");
} */

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

无论如何,我有一个名为结果的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 );

 ?>

1 个答案:

答案 0 :(得分:1)

在这个具体的例子中,只是为了证明你可以通过在成功函数中使用它来改变#result div的内容:

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

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

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

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