javascript - 使用选择选项值更改表格填充

Question

我是 php 和 ajax 的新手，想要显示一个充满数据库内容的表格。我成功地做到了这一点，但现在我正在尝试使用选择来更改表格内容。我知道有很多网站解释了如何做到这一点，但我不知何故不明白。对我来说最好的解决方案是更改表格而不重新加载页面或使用单独的按钮重新加载页面。

我读到过关于使用 ajax/javascript 来实现这一点，但是，正如我提到的，我对这些事情并不熟悉。

下面是我已经可以运行的代码。

PHP:

<?php

$mysqlhost="localhost"; // 
$mysqluser="root"; //
$mysqlpwd=""; //
$mysqldb="wordpress"; //


$connection=mysql_connect($mysqlhost, $mysqluser, $mysqlpwd); 
mysql_select_db($mysqldb, $connection);


$sql = "SELECT id, user_email FROM wp_users";  
$db_query = mysql_query($sql);


?>
<table cellpadding="1" cellspacing="3" border="1">
    <tr>
        <td>ID</td>
        <td>Mail</td>
    </tr>
<?php

  while ($adr = mysql_fetch_array($db_query)){
?>

    <tr>
        <td><?=$adr['id']?></td>
        <td><?=$adr['user_email']?></td>
    </tr>
<?php
  }
?>
</table>

我的选择:

<select name="Choose" title="chose">
<option value="one" id="One">One</option>
<option value="two" id="Two">Two</option>
<option value="three" id="Three">Three</option>
</select>

我真的很欣赏一些代码或提示如何做到这一点。

Answer 1

这是代码:

html:

<table id="tableid"> //mention id for a table
 ......
 ......
 </table>

// create an event for select
<select name="Choose" title="chose" onchange="getajax(this.value)">
<option value="one" id="One">One</option>
<option value="two" id="Two">Two</option>
<option value="three" id="Three">Three</option>
</select>

javascript:

function getajax(value){
$.ajax({
type: "GET",
url: "Ajaxpage.php",
data: {text:value},
success: function(data) {
  $("#tableid").html(data);
}
});
}

Ajaxpage.php:

<?php
$mysqlhost="localhost"; // 
$mysqluser="root"; //
$mysqlpwd=""; //
$mysqldb="wordpress"; //


$connection=mysqli_connect($mysqlhost, $mysqluser, $mysqlpwd); //use mysqli instead of mysql

mysqli_select_db($mysqldb, $connection);


$sql = "SELECT id, user_email FROM wp_users where someid='".$_GET['text']."'";  

$query = mysql_query($sql);
 while($row= mysql_fetch_array(query)){
 echo "<tr><td>".$row['id']."</td><td>".$row['user_email']."</td></tr>";

 }


?>