php - AJAX 调用过多
问题描述
我的代码太乱了。每次显示元素时,我都会创建 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]);
}
});
});
}
推荐阅读
- xslt - 有没有办法从 XSLT 的特定标签内的所有标签中添加值?
- keras - keras模型在包装后未显示所有图层
- python-3.x - 字符串反转错误,因为我想让这段代码有用的方式不起作用,olone可以解决这个问题
- c++ - 编译器资源管理器和 GCC 有不同的输出
- c++ - 如何在 WSL 2 中读取物理内存?
- assembly - 程序集中的分段错误(核心转储)
- python - 如何在python中制作一个可暂停的计时器?
- javascript - Vuej.s 中 @import sass 文件的问题
- android - EditTextPreference inputType=textPassword 不起作用
- go - crypto/tls 包中的自定义 VerifyPeerCertificate