[英]Getting data out of a database with XMLHttpRequest, PDO, JSON, PHP and JavaScript
[英]Javascript Ajax are not getting data in the dropdown Select tag in php (PDO)
我的一個腳本有問題,我想在下拉選擇標簽上顯示數據,但是我的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>
現在正在創建問題的Javascript代碼
<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>
我的數據庫連接似乎很好,因為兩個文件都獲得了結果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文件,它們也可以正常工作,但我認為也應該考慮,因為任何可能的問題都可能來自開始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注入。 您使用它的方式在第二個功能中是錯誤的。
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);
?>
腳本中存在一些錯誤,我無法通過chrome控制台測試ajax響應,但發現有問題。 我試圖替換您的腳本,但不會在控制台中顯示錯誤,希望對您有所幫助。
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: function(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() {
}
}
} );
};
您的class.user.php代碼中的getProvince()函數在此處包含語法錯誤: ='".$_GET["id"]."'"
-應該為="'".$_GET["id"]."'"
。另外,在編寫數據庫和列名時,我認為這應該是一個句點而不是下划線,但是我對此不是100%肯定的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.