我对此非常陌生,这是我第一篇关于stackoverflow的帖子。我只是想:创建一个下拉列表1)每次更改时触发查询(Gettech.php)2)用查询结果更新另一个字段
在这种情况下,他们选择“技术名称”,并且每次“技术名称”更改时,它应该使用关联的“技术编号”(PDO查询的结果)更新另一个字段。这就是我所拥有的:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form action="Gettech.php" method="get">
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> Name:</label>
<select class= "form-control" id="techname" name=techname><option value="">Select...</option>
<option value="First Name">First Name</option>
<option value="Second Name">Second Name</option> .
.
.
</select>
</div>
</form>
</body>
</html>
和Gettech.php部分
<?php
$servername = "localhost";
$username = "####";
$password = "####";
$name = "Joey";
try {
$db = new PDO('mysql:host=localhost;dbname=staff', $username, $password);
} catch (PDOException $e) {
echo $e->getMessage()."<br>";
die();
}
$sql = "SELECT name, techid from techs where name= '$name'";
foreach( $db->query($sql) as $row ) {
echo $row['name']."<br>".$row['techid']."<br>";
}
$db = null;
?>
他们单独工作但不知道如何将它们组合成一个有效的解决方案。欢迎提示!
根据您对要执行的操作的描述,您确实需要使用Javascript / JQuery执行此操作。我没有测试过这段代码,只是希望能让你走上正确的道路。请访问https://learn.jquery.com/ajax/jquery-ajax-methods以了解AJAX。
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/ajax.js"></script>
</head>
<body>
<form>
<div class="row">
<div class="col-sm-6 form-group">
<label for="name"> Name:</label>
<select class="form-control" id="techname" name=techname>
<option value="">Select...</option>
<option value="First Name">First Name</option>
<option value="Second Name">Second Name</option>
.
.
</select>
</div>
</div>
</form>
<div id="content"> <!-- AJAX DATA --> </div>
</body>
</html>
PHP
<?php
$servername = "localhost";
$username = "####";
$password = "####";
$name = "Joey";
try {
$db = new PDO('mysql:host=localhost;dbname=staff', $username, $password);
} catch (PDOException $e) {
$error = [
'status' => "error",
'error' => $e->getMessage()
];
return json_encode($error);
}
// Sanitize and validate this for security & integrity purposes
if (isset($_GET['name'])) {
$name = $_GET['name'];
} else {
$error = [
'status' => "error",
'error' => "$_GET not received"
];
return json_encode($error);
}
$sql = "SELECT name, techid FROM techs WHERE name = :name";
// Make sure you are using prepared statements,
// it's one of the most powerful security features of PDO
$stmt = $db->prepare($sql);
$stmt->bindValue(':name', $name, PDO::PARAM_STR);
$stmt->execute();
// You need to "fetch" the result before you can use it
$result = $stmt->fetchAll();
$db = null;
foreach($result as $key => $row) {
$html .= "<div>{$row['name']}</div>";
$html .= "<div>{$row['techid']}</div>";
}
$data = [
'status' => "success",
'html' => $html
];
return json_encode($data);
?>
ajax.js
// Wait for DOM to be ready
$(function() {
$('#techname').on('change', function(e) {
// Prevents page from reloading
e.preventDefault();
var value = $("option:selected", this).val();
$.ajax({
type: "GET",
// If file is not in docroot, you need to specify the subdirectory
url: "Gettech.php",
dataType: "JSON",
data: value.serialize(),
beforeSend: function() {
// Good idea to put a loader here so the user knows
// something is happening if request takes time
$('.loading').fadeIn('fast');
},
success: function(result) {
if (result.status === "error") {
var data = result.error;
} else if (result.status === "success") {
var data = result.html;
}
// Hide the loader once completed
$('.loading').fadeOut('fast');
// Add query data to the DOM
$('#content').html(data);
}
});
});
});