Javascript AJAX按钮:男性vs女性-需要第三选择(两者)

Javascript AJAX按钮:男性vs女性-需要第三选择(两者),javascript,php,mysql,Javascript,Php,Mysql,我正在学习如何使用AJAX,并从教程中获得一个脚本,该脚本显示存储在数据库表中的人名。数据库表包含一个名为Gender的字段。有两个可能的值-M和F 然后,页面会显示一个按钮,您可以在M和F之间切换,只显示男性或女性 Sex: <select id='Gender'> <option value="M">M</option> <option value="F">F</option> </select> <input t

我正在学习如何使用AJAX,并从教程中获得一个脚本,该脚本显示存储在数据库表中的人名。数据库表包含一个名为Gender的字段。有两个可能的值-M和F

然后,页面会显示一个按钮,您可以在M和F之间切换,只显示男性或女性

Sex: <select id='Gender'>
<option value="M">M</option>
<option value="F">F</option>
</select>
<input type='button' onclick='ajaxFunction()' 
value='Query MySQL'/>
</form>
有没有办法修改它,这样我就可以提供第三种选择-显示所有人?我在玩这个想法,但我不知道如何使M和F成为期权价值

Sex: <select id='Gender'>
<option value="M">M</option>
<option value="F">F</option>
<option value="M and F">All</option>
</select>
<input type='button' onclick='ajaxFunction()' 
value='Query MySQL'/>
</form>
我正在使用PHP和MySQL

以下是第一页的代码:

<html>
<body>
<script language="javascript" type="text/javascript">
<!-- 
//Browser Support Code
function ajaxFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
  // Opera 8.0+, Firefox, Safari
 ajaxRequest = new XMLHttpRequest();
}catch (e){
// Internet Explorer Browsers
 try{
   ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
 }catch (e) {
   try{
      ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }catch (e){
      // Something went wrong
      alert("Your browser broke!");
      return false;
     }
  }
}

ajaxRequest.onreadystatechange = function(){
 if(ajaxRequest.readyState == 4){
    var ajaxDisplay = document.getElementById('ajaxDiv');
    ajaxDisplay.innerHTML = ajaxRequest.responseText;
   }
 }
var Gender = document.getElementById('Gender').value;
var Birth_Year = document.getElementById('Birth_Year').value;
var Died = document.getElementById('Died').value;
var queryString = "?Birth_Year=" + Birth_Year ;
queryString +=  "&Died=" + Died + "&Gender=" + Gender;
ajaxRequest.open("GET", "AjaxPeople2.php" + 
                          queryString, true);
ajaxRequest.send(null); 
}
//-->
</script>
<form name='myForm'>
Born Before: <input type='text' id='Birth_Year'> <br>
Died Before: <input type='text' id='Died'>
<br>
Sex: <select id='Gender'>
<option value="M">M</option>
<option value="F">F</option>
<option value="M_F">All</option>
</select>
<input type='button' onclick='ajaxFunction()' 
value='Query MySQL'/>

<input type="radio" name="Men" value="M">M<br>
<input type="radio" name="Women" value="F">F<br>
<input type="radio" name="All" value="M_F">All<br>

</form>
<div id='ajaxDiv'>Your result will display here</div>
</body>
</html>
第二页的代码

$dsn = "mysql:host=localhost;dbname=db_new;charset=utf8";
$opt = array(
 PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
 PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC
);

$pdo = new PDO($dsn,'(Username)','(Password)', $opt);

// Retrieve data from Query String
$Common = $_GET['Common'];
$Birth_Year = $_GET['Birth_Year'];
$Died = $_GET['Died'];
$Gender = $_GET['Gender'];
$Birth_ID = $_GET['Birth_ID'];
$Death_ID = $_GET['Death_ID'];

$sql= "SELECT * FROM people_bios PB
 LEFT JOIN people P ON P.URL = PB.URL
 WHERE Gender = :Gender AND Site = 'PX'";
 if(is_numeric($Birth_Year)) {
 $sql .= " AND Birth_Year <= :Birth_Year";
}
if(is_numeric($Died)) {
$sql .= " AND Died <= :Died";
}
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':Gender',$Gender,PDO::PARAM_STR);
if (is_numeric($Birth_Year)) {
 $stmt->bindParam(':Birth_Year', $Birth_Year, PDO::PARAM_INT);
}
if(is_numeric($Died)) {
 $stmt->bindParam(':Died', $Died, PDO::PARAM_INT);
}
$stmt->execute();

//Execute query
  try {
  $stmt->execute();
 } catch (Exception $e) {
 // print_r($e); // Do something more useful here, like log.
}

//Build Result String
$display_string = "<table>";
$display_string .= "<tr>";
$display_string .= "<th>Name</th>";
$display_string .= "<th>Born</th>";
$display_string .= "<th>Died</th>";
$display_string .= "<th>Birth Place</th>";
$display_string .= "<th>Death Place</th>";
$display_string .= "</tr>";

// Insert a new row in the table for each person returned
while ($row = $stmt->fetch())
{
 $display_string .= "<tr>";
 $display_string .= "<td>$row[Common]</td>";
 $display_string .= "<td>$row[Birth_Year]</td>";
 $display_string .= "<td>$row[Died]</td>";
 $display_string .= "<td>$row[Birth_ID]</td>";
 $display_string .= "<td>$row[Death_ID]</td>";
 $display_string .= "</tr>";    
}

echo "Query: " . $query . "<br />";
$display_string .= "</table>";
echo $display_string;

如果什么都没有或什么都没有,给你一些参考

$where_gender = preg_match('{^[MF]$}',$Gender)? 'AND Gender = :Gender' : '';


$sql= "SELECT * FROM people_bios PB
 LEFT JOIN people P ON P.URL = PB.URL
 WHERE  Site = 'PX' {$where_gender}";

 ...


if ($where_gender) {
    $stmt->bindParam(':Gender',$Gender,PDO::PARAM_STR);
}

示例:值=M_F??所以,我明白你的意思了……你想要什么?为什么不使用单选按钮而不是选择按钮?-并添加第三个选项。然后,你需要显示ajaxFunction中的内容。以及接收该值的php代码。这非常好!我可以看到有多种方法可以做到这一点;这里有很多好的建议。