我的代码是如此凌乱。我创建1次Ajax调用每次我显示的元素。我的表将有80行的固定数量。我怎么能简化我重复AJAX调用。
HTML
<tr>
<td>
<div class="form-group row mb-0" >
<div class="col-12">
<select class="form-control form-control-sm mySelect2 " name="111" id="111">
<?php
include ('server_side/connection.php');
$sql = "SELECT * FROM tbl_subjects";
$result=mysqli_query($conn, $sql);
while ($row=mysqli_fetch_array($result)) { ?>
<option value="<?php echo $row['subject_code'];?>"><?php echo $row['subject_code'];?></option>
<?php } ?>
</select>
</div>
</div>
</td>
<td><span id="description_111"></span></td>
<td><span id="prerequisite_111"></span></td>
<td><span id="unit_111"></span></td>
AJAX
$("#111").change(function(){
var subject_code = $(this).val();
$.ajax({
type: "POST",
url: "server_side/load_subjectdesc.php",
data: {subject_code: subject_code},
success: function(result){
$("#description_111").html(result);
}
});
});
$("#111").change(function(){
var subject_code = $(this).val();
$.ajax({
type: "POST",
url: "server_side/load_subjectpreq.php",
data: {subject_code: subject_code},
success: function(result){
$("#prerequisite_111").html(result);
}
});
});
$("#111").change(function(){
var subject_code = $(this).val();
$.ajax({
type: "POST",
url: "server_side/load_subjectunit.php",
data: {subject_code: subject_code},
success: function(result){
$("#unit_111").html(result);
}
});
});
每一个项目中的一个Ajax来显示实在是太多了。我怎么能简化或删除这么多的AJAX调用?
您将需要创建一个PHP页面将返回这种形式的JSON:
{
description: 'descriptionvalue',
perequisite: 'perequisitevalue',
unit: 'unitvalue'
}
你会送一个AJAX请求给它,如:
$("#111").change(function(){
var subject_code = $(this).val();
$.ajax({
type: "POST",
url: "server_side/yourpage.php",
data: {subject_code: subject_code},
success: function(result){
for (var key in result) $("#" + key + "_111").html(result[key]);
}
});
});
你可以进一步细化此:
function myChange(idVal) {
$("#" + idVal).change(function(){
var subject_code = $(this).val();
$.ajax({
type: "POST",
url: "server_side/yourpage.php",
data: {subject_code: subject_code},
success: function(result){
for (var key in result) $("#" + key + "_" + idVal).html(result[key]);
}
});
});
}