我请求您在 HTML、JavaScript、jQuery、ajax、PHP 和 MySQL 方面提供帮助。遗憾的是，我无法提供任何代码（只有一个），因为我没有任何实际有效的代码。因为我不是编码员，所以这超出了我的理解范围。但我会尽力描述我希望实现的目标。
我有一个包含多个文本区域的 HTML 文件。这些文本区域具有唯一的 ID（如果有一个解决方案需要命名这些文本区域或为其添加标题，那么我没问题；如果这些文本区域需要包装到表单中，也没关系）。
我还有一个 MySQL 数据库，有两列 [ UUID ， Translations ]。在“UUID”列中存储了与文本区域相同的 ID，在“翻译”列中存储了与这些唯一 ID 配对的文本字符串。
我想要实现的是获取与唯一 ID 相对应的“UUID”-“翻译”对，并在加载 html 时用“翻译”列的文本字符串填充文本区域。不需要显示 UUID，只需显示字符串。我不想手动指定 textareas+ID 或 ID-UUID 配对，因为 html 中的所有 ID 都将由第 3 方应用程序生成，该应用程序还创建数据库文件并使用这些 ID 创建所有记录。因此，也许需要一个迭代所有现有 ID 的解决方案。
我已经知道如何连接到我的数据库以及如何发送和保存记录到其中，所以我想知道如何拉取、如何获取特定数据以及如何用它们填充文本字段。
您能向我证明完成工作所需的代码吗？如果要求不是太多，我想得到一个完整的解决方案，因为对于独立的代码片段我一点运气都没有。 如有任何帮助，我们将不胜感激！
到目前为止我唯一的代码是这个 HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta title="TranslationFetcher">
<!-- include bootstrap css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" />
</head>
<body style="max-width: 100%">
<div class='database-flex' style="max-width: 100%; margin-right: 2rem;"><div style="max-width: 100%; margin-right: 0rem;"><ul style="max-width: 100%; margin-right: 0rem;">
<form method="POST" action="save.php">
<label>Text1's translation</label>
<textarea id="h599800e5g66d7g4de4gb030g6521266419fc" title="translation1" name="translationdata1" class="form-control translation-textarea"></textarea>
<label>Text2's translation</label>
<textarea id="hc17fc93fg968eg4591g8f31g0fe23110628a" title="translation2" name="translationdata2" class="form-control translation-textarea"></textarea>
...
<label>Text999's translation</label>
<textarea id="h435fb675gf2e0g46efga604gded8c83e213f" title="translation999" name="translationdata999" class="form-control translation-textarea"></textarea>
</form>
<!-- include bootstrap js -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<!-- include jquery js -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>
过去两周我一直在浏览 StackOverflow，但无论我如何尝试将各个部分组合在一起，都没有效果。
更新#1
我假设这个 PHP 代码应该从数据库中获取必要的密钥对：
<?php
$link = mysqli_connect("localhost", "root", "", "TranslateProject");
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
}
$query = "SELECT UUID, Translations FROM TranslateProject";
if ($result = mysqli_query($link, $query)) {
while ($row = mysqli_fetch_assoc($result)) {
printf ("%s (%s)\n", $row["UUID"], $row["Translations"]);
}
mysqli_free_result($result);
}
mysqli_close($link);
?>
但我不知道该怎么办，
我尝试了很多其他问题中可用的组合，但我完全迷失了。
我会为你解答这些问题，但你也确实需要做一些调查
将循环更改为
$query = "SELECT UUID, Translations FROM TranslateProject";
$data = array();
if ($result = mysqli_query($link, $query)) {
while ($row = mysqli_fetch_assoc($result)) {
$data[] = array('UUID' => $row["UUID"], 'Translations' => $row["Translations"]);
}
}
$jsonData = json_encode($data);
echo $jsonData;
假设生成
[
{
"UUID": "h599800e5g66d7g4de4gb030g6521266419fc",
"Translations": "Translation text 1"
},
{
"UUID": "hc17fc93fg968eg4591g8f31g0fe23110628a",
"Translations": "Translation text 2"
},
// ... other translations
]
然后你可以在 HTML 页面头部执行此操作：
window.addEventListener('DOMContentLoaded', () => { // when page has loaded
fetch('myTranslations.php')
.then(response => response.json())
.then(translations => {
translations.forEach(translation => {
const textarea = document.getElementById(translation.UUID);
if (textarea) {
textarea.value = translation.Translations;
}
});
});