我是新手,仍在学习AJAX呼叫,我不知道为什么我的AJAX呼叫只呼叫一个下拉列表中的数据。好的,这种情况是我的表单中有3个下拉列表,这些下拉列表用于选择医生,显示咨询费并提供约会日期列表。我面临的问题是,在doctor dropdown list
中选择了医生时,AJAX调用将仅加载appointment date dropdown list
的数据。它没有加载咨询费。
这是我的医生代码,咨询费和预约日期下拉列表:
<div>
<label>Select Doctor</label>
<select name="doctor" id="get_doctor_name" onchange="getfee()" autocomplete="off" required>
<option hidden value="">Select Doctor</option>
</select>
</div>
<div>
<label>Consultation Fee</label>
<select name="fees" id="get_doctor_fee" autocomplete="off" readonly>
</select>
</div>
<div>
<label>Appointment Date</label>
<select name="appdate" id="get_date">
</select>
</div>
已更新:以下是带有功能getfee()
和getdate()
的AJAX调用的脚本:
<script>
//function for fee details
function getfee()
{
$("#loaderIcon").show();
jQuery.ajax(
{
url: "getfee.php",
data: {doctor : $("#get_doctor_name").val()},
type: "POST",
success: function(data)
{
$("#get_doctor_fee").html(data);
$("#loaderIcon").hide();
},
error: function() {}
});
}
//function for appointment date details
function getdate() {
$("#loaderIcon").show();
jQuery.ajax({
url: "getslot-date.php",
data: {doctor : $("#get_doctor_name").val()},
type: "POST",
success: function(data) {
$("#get_date").html(data);
$("#loaderIcon").hide();
},
error: function() {}
});
}
</script>
以下是AJAX调用脚本中getfee.php
中的代码:
<?php
include('incl/connection.php');
if(!empty($_POST['doctor']))
{
$doctor =$_POST['doctor'];
$sql = "SELECT D_FEES FROM tbldoctor
WHERE D_ID=:doctor";
$query = $dbh->prepare($sql);
$query->bindParam(':doctor',$doctor,PDO::PARAM_STR);
$query->execute();
if (!$query->execute()) {
print_r($query->errorInfo());
}
$results=$query->fetchAll(PDO::FETCH_OBJ);
$cnt=1;
if($query->rowCount() > 0)
{
foreach($results as $results)
{
echo '<option readonly value="'.htmlentities($results->D_FEES).'">'. htmlentities($results->D_FEES).'</option>';
}
}
else
{
echo '<option value=""> No Doctor in this specilization</option>';
echo "<script>$('#submit').prop('disabled',true);</script>";
}
}
?>
以下是AJAX调用脚本中getslot-date.php
中的代码:
<?php
include('incl/connection.php');
if(!empty($_POST['doctor']))
{
$doctor =$_POST['doctor'];
$sql = "SELECT T_ID, T_DATE, T_TIME FROM tbltimeslot
WHERE D_ID=:doctor AND A_ID IS NULL";
$query = $dbh->prepare($sql);
$query->bindParam(':doctor',$doctor,PDO::PARAM_STR);
$query->execute();
if (!$query->execute()) {
print_r($query->errorInfo());}
$results=$query->fetchAll(PDO::FETCH_OBJ);
$cnt=1;
if($query->rowCount() > 0)
{
foreach($results as $results)
{
echo '<option value="'.htmlentities($results->T_ID).'">'.htmlentities($results->T_DATE).' @ '.htmlentities($results->T_TIME).'</option>';
}
}
else
{
echo '<option value=""> No available date</option>';
echo "<script>$('#submit').prop('disabled',true);</script>";
}
}
?>
下面是tbldoctor
和tbltimeslot
的表:
CREATE TABLE `tbldoctor` (
`D_ID` int(11) NOT NULL,
`D_SPECILIZATION` varchar(255) NOT NULL,
`D_NAME` varchar(255) NOT NULL,
`D_FEES` varchar(255) DEFAULT NULL
)
CREATE TABLE `tbltimeslot` (
`T_ID` int(11) NOT NULL,
`T_DATE` date NOT NULL,
`T_TIME` time NOT NULL,
`D_ID` int(11) NOT NULL,
`A_ID` int(11) DEFAULT NULL
)
答案 0 :(得分:0)
您应该将数据作为json返回,然后使用它
$results=$query->fetchAll(PDO::FETCH_OBJ);
// remove all code after it, and add the following line
echo json_encode($results);
并在您的ajax渲染选项中
function getfee()
{
$.ajax(
{
url: "getfee.php",
data: {doctor : $("#get_doctor_name").val()},
type: "POST",
beforeSend: function() {
//start loader
$("#loaderIcon").show();
},
error: function() { // hide loader when error otherwise will stuck on your screen
$("#loaderIcon").hide();}
success: function(objJson)
{
var data = $.parseJSON(objJson);
console.log(data); // to view how it looks in console, array, empty or whatever
$('#get_doctor_fee').empty();
if(data.length > 0) {
$.each(data, function(key, value) {
$('#get_doctor_fee').append('<option value="'+ value.D_FEES+'">'+ value.D_FEES +'</option>');
});
} else {
$('#get_doctor_fee').append('<option value="">No Doctor in this specilization </option>');
$('#submit').prop('disabled',true);
}
$("#loaderIcon").hide();
},
});
}
您可以对其他下拉菜单应用相同的调整,只是一个示例,向您展示如何进行管理。
您可以更改的另一件事是调用函数,这样可以使函数更具可定制性并具有更多控制权。但是取决于您的喜好
$('#get_doctor_name').on('change', function() {
// call your ajax here
...
url: "getfee.php",
data: {doctor : $(this).val()},
type: "POST",
...
// update get_doctor_fee here
})
$('#get_doctor_fee').on('change', function() {
// call your ajax here
...
url: "getslot-date.php",
data: {doctor : $(this).val()},
type: "POST",
...
// update get_date dropdown
})
答案 1 :(得分:-2)
您必须这样写数据
file