我的一个脚本有问题，我想在下拉选择标签上显示数据，但它们是我的 javascript 的问题，即使alert() 没有响应，它也不起作用，也许是因为我编写的函数。顺便说一句，php 数据很好，并以数组格式从页面获取输出
home.php
<div class="form-group">
<span class="label label-default">Country</span>
<select class="form-control" id="country1">
<div class="form-group">
<span class="label label-default" >Province</span>
<select class="form-control"id="province1">
</select>
</div>
Now the Javascript Code which is creating problem
<script type="text/javascript">
function country() {
$('#country1').empty();
$('#country1').append("<option> Loading --- </option>");
$('#province1').append("<option value='0'>--Select Province-- </option>");
$.ajax({
type:"POST",
url:"country_dropdown.php",
contentType:"application/json; charset=utf-8",
datatype:"json",
success: fuction(data) {
$('#country1').empty();
$('#country1').append("<option value='0'>-- Select Country---</option>");
$.each(data,function(i,item){
$('#country1').append('<option value="'+data[i].CountryID + '">'+ data[i].CountryName +'</option>');
});
},
complete : function() {
}
});
}
$(document).ready(function(){
country();
});
function province(id) {
$('#province1').empty();
$('#province1').append("<option> Loading --- </option>");
$.ajax ({
type:"POST",
url:"province_dropdown.php?id"+id,
contentType:"application/json"
charset:"utf-8",
dataType:"json",
success: function(data){
$('#province1').empty();
$('#province1').append("<option value='0'> --Select Province-- </option>");
$.each(data,function(i.item)
$('#province1').append('<option value="'+data[i].ProvinceID+'">'+data[i].ProvinceName+'</option>');
});
complete: function() {
}
});
}
</script>
My database Connection seems to be fine as both the files are getting the results country_dropdown.php
<?php
include('config.php');
include('class.user.php');
try {
$obj = new USER();
$stmt = $obj->getCountry();
echo "{";
while($result=$stmt->fetch(PDO::FETCH_ASSOC)){
echo '"'.$result['CountryID'].'":"'.$result['CountryName'].'",';
}
echo '"0":"Select Country"}';
}
catch(PDOException $e) {
echo "Error: " . $e->getMessage();
}
$conn = null;
header('Content-type: application/json');
?>
province_dropdown.php
<?php
include('config.php');
include('class.user.php');
try {
$obj = new USER();
$stmt = $obj->getProvince();
echo "{";
while($result=$stmt->fetch(PDO::FETCH_ASSOC)){
echo '"'.$result['ProvinceID'].'":"'.$result['ProvinceName'].'",';
}
echo '"0":"Select Province"}';
}
catch(PDOException $e) {
echo "Error: " . $e->getMessage();
}
$conn = null;
header('Content-type: application/json');
?>
class.user.php file which has the functions to query the data ,they are also working fine but i think it should also be consider as any possible problem can came from the start class.user.php
public function getCountry() {
$stmt =$this->conn->prepare("SELECT * FROM country");
$stmt->execute();
return $stmt;
}
public function getProvince(){
$stmt =$this->conn->prepare("SELECT * FROM province WHERE Country_CountryID='".$_GET["id"]."'");
$stmt->execute();
return $stmt;
}
问题就在这里，因为这两个选择标签都无法获取值，因为国家/地区值索引对应于省份，因此省份取决于国家/地区
最佳答案
首先，当您更改国家/地区时，您的事件处理程序在哪里？
其次，您的代码中有一堆类似拼写错误的错误。
以下是一些修复:
$(document).ready(function() {
// cache the elements that you will be re-using
var $country = $('#country1'), $province = $('#province1');
// renamed
function getCountries() {
$country.html("<option> Loading --- </option>");
$province.html("<option value='0'>--Select Province-- </option>");
$.ajax({
type: "POST",
url: "country_dropdown.php",
// typo: datatype:"json"
dataType: "json",
// error: success: fuction (data) {
success: function (data) {
$country.html("<option value='0'>-- Select Country---</option>"); // simplified
$.each(data, function (i, item) {
$country.append('<option value="' + item.CountryID + '">' + item.CountryName + '</option>');
});
// attach event listener to the country dropdown, so that when the country changes, we load the related provinces
$country.on('change', getProvinces);
// trigger event listener ^ to get related country's provinces
$country.trigger('change');
}
});
}
// renamed
function getProvinces() {
$province.html("<option> Loading --- </option>"); // simplified
$.ajax ({
type: "POST",
url: "province_dropdown.php?id" + $(this).val(),
dataType: "json",
success: function (data) {
$province.html("<option value='0'> --Select Province-- </option>"); // simplified
// error: $.each(data, function(i.item)
$.each(data, function (i, item) {
// error: ('#province1').append(...)
$province.append('<option value="' + item.ProvinceID + '">' + item.ProvinceName + '</option>');
});
}
});
}
// load the countries
getCountries();
});
另一件事，使用 prepare() 的全部意义是为了避免SQL注入(inject)。您在第二个函数中使用它的方式是错误的。
class.user.php
public function getCountry() {
$stmt = $this->conn->query("SELECT * FROM country"); // no need to use prepare() as you are not using any untrusted data
return $stmt;
}
// renamed
public function getProvinceByCountry($id) {
$stmt = $this->conn->prepare("SELECT * FROM province WHERE Country_CountryID = ?"); // notice the '?' ?
$stmt->execute(array($id));
return $stmt;
}
您不需要构建 JSON 对象。使用json_encode() .
country_dropdown.php
<?php
include('config.php');
include('class.user.php');
try {
$obj = new USER();
$stmt = $obj->getCountry();
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
echo "Error: " . $e->getMessage();
}
$conn = null; //unnecessary
header('Content-type: application/json');
echo json_encode($results);
?>
province_dropdown.php
<?php
include('config.php');
include('class.user.php');
try {
$obj = new USER();
$stmt = $obj->getProvinceByCountry($_GET["id"]);
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
echo "Error: " . $e->getMessage();
}
$conn = null; //unnecessary
header('Content-type: application/json');
echo json_encode($results);
?>
关于Javascript Ajax 未在 php (PDO) 中的下拉选择标签中获取数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37778408/