JS/PHP <--> 嵌入式 PHP HTML答案

【问题标题】：JS/PHP <--> embedded PHP HTMLJS/PHP <--> 嵌入式 PHP HTML
【发布时间】：2021-12-26 15:01:50
【问题描述】：

我是 JS/PHP/MySQL 开发的初学者。我想用 MySQL DB 中的表（近 4000 条记录）填充选择 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) 时，填充选择需要很长时间（大约 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 请求。是否有其他方法或解决方法可以解决此请求的缓慢问题？或者我在这里做错了什么？

【问题讨论】：

对，你的问题是什么？我会说一个包含 4000 个条目的下拉菜单作为选择机制几乎没有用处
不相关仅供参考：language="javascript" 用于 oooold 浏览器，已弃用且可以删除
原样type="text/javascript"
大部分是猜测......修改 DOM 4000 次将使浏览器保持相当忙碌。尝试将所有新元素存储在一个字符串中，然后在循环之后将该字符串添加到 DOM。
谢谢大家。 RiggsFolly：那你建议改用什么？

标签： javascript php html mysql

【解决方案1】：

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 返回。然后 JS 所要做的就是在 DOM 中添加/替换单个元素。这会将整个循环移动到服务器而不是浏览器。

尽管正如其他人所提到的，下拉列表中的 4K 项目会很慢（更不用说很难使用），只是由于列表的大小。我希望资源不足的机器在打开选择时会有点不稳定。

【讨论】：

非常感谢大家。我会试试的。