我是JS/PHP/MMySQL开发的初学者。我想用MySQL数据库中的表(近4000条记录(填充一个select HTML元素，相关代码如下。
<body onload="jsonload()">
<label>Beneficier Employee:</label>
<select item class = "BenEmpNo" name = "BenEmpNo" id = "BenEmpNo" onchange="jsEmpNoOnChg()" >
</select>
</body>
<script language="javascript" type="text/javascript">
function jsonload()
{
let jsSelBenEmpNo = document.getElementById("BenEmpNo");
let jsBenEmpNoDataAry;
jsSelBenEmpNo.innerHTML = "<option value='-select-'>-Select-</option>";
oReq = new XMLHttpRequest();
oReq.open('POST', "../php/oh-get_BenEmpNo.php", true);
oReq.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
oReq.onload = function () {
jsBenEmpNoAry = this.responseText.split('|');
for (let i = 1; i < jsBenEmpNoAry.length; i++)
{
jsBenEmpNoDataAry = jsBenEmpNoAry[i].split('~');
jsSelBenEmpNo.innerHTML += "<option value='" + jsBenEmpNoDataAry[0] +"'>" + "(" + jsBenEmpNoDataAry[0] + ")" + jsBenEmpNoDataAry[1] + "</option>";
}
}
oReq.send("parsparm=" + "|");
}
</script>
</html>
----PHP---
<?php
$sql = "select EmpNo, EngName from beneficiary";
$ResultSet = "";
require_once("oh-dbcon.php");
if ($result = mysqli_query($db_con, $sql))
{
while ($row = mysqli_fetch_row($result))
{
$ResultSet = $ResultSet . "|" . $row[0] . "~" . $row[1];
};
$ResultSet = $ResultSet . "~OK";
}else
$ResultSet = "ERROR Result (" . mysqli_error($db_con) . ")-(" . $sql . ")";
mysqli_close($db_con);
echo $ResultSet;
?>***
当我使用纯JS(XMLHttpRequest(时，填充select需要很长时间(大约50秒(，在此期间页面被冻结。但是，当使用HTML嵌入的PHP代码时，它几乎会立即填充select元素(下面的代码(。
<label>Beneficier Employee:</label>
<select item class = "BenEmpNo" name = "BenEmpNo" id = "BenEmpNo" onchange="jsEmpNoOnChg()" >
<option value = "-Select-">-Select-</option>
<?php
include("ohdadbcon.php");
$sql_phrase_ben = "select EmpNo, EngName from beneficiary";
$qry_result_ben = @mysqli_query($db_con, $sql_phrase_ben);
while ($row_ben = mysqli_fetch_assoc($qry_result_ben))
{
?>
<option value = "<?php echo $row_ben['EmpNo']?>" >
<?php
echo $row_ben['EngName'] . " | " . $row_ben['EmpNo'] ;
?>
</option>
<?php
}
mysqli_free_result($qry_result_ben);
?>
</select>
我只想使用JS请求。是否有其他方法或解决方法来解决此请求的缓慢问题？，或者我在这里做错了什么？
2个选项。。。调整为只修改DOM一次：
let options = '';
for (let i = 1; i < jsBenEmpNoAry.length; i++)
{
jsBenEmpNoDataAry = jsBenEmpNoAry[i].split('~');
options += "<option value='" + jsBenEmpNoDataAry[0] +"'>" + "(" + jsBenEmpNoDataAry[0] + ")" + jsBenEmpNoDataAry[1] + "</option>";
}
jsSelBenEmpNo.innerHTML = options;
或
您还可以使用PHP生成选择或选项列表，并通过AJAX返回THAT。然后JS所要做的就是在DOM中添加/替换单个元素。这将把整个循环移动到服务器而不是浏览器。
尽管正如其他人所提到的，仅由于列表的大小，下拉列表中的4K项目将很慢(更不用说很难使用(。我希望资源不足的机器在打开select时会有点波动。