处理 htmxjs 中的连接错误答案

【问题标题】：Handle connection errors in htmxjs处理 htmxjs 中的连接错误
【发布时间】：2021-04-14 09:39:25
【问题描述】：

借助 HTMXJS 及其伴侣 _hyperscriptJS 的强大和优雅，只需几行代码即可编写选择、上传 (POST) 多个文件并显示进度条，然后显示它们：

<form hx-encoding="multipart/form-data" 
    _="on htmx:xhr:progress(loaded, total) set #bar.value to (loaded/total)*100">
        <input type="file" name="fileToUpload[]" multiple 
            hx-post="upload.php"
            hx-target="#image-src"
            hx-swap="innerHTML">
        <button type="button">Select</button>

    <progress id="bar" value="0" max="100"></progress>
</form>

<div id="image-src"></div>

和upload.php：

$countfiles = count($_FILES['fileToUpload']['name']);
   
for($i=0;$i<$countfiles;$i++){
    $filename = $_FILES['fileToUpload']['name'][$i];
    move_uploaded_file($_FILES['fileToUpload']['tmp_name'][$i], $filename);
    echo '
        <div>
            <img src="'.$filename.'">
        </div>
    ';
}

但现在我想添加网络错误处理。我知道 HTMX 会触发 htmx:sendError，但我不明白如何将其添加到我上面的代码中，以便在出现网络错误时弹出警报（或将错误交换/显示为 <div>）

【问题讨论】：

标签： htmx

【解决方案1】：

你在正确的轨道上，处理这个问题的方法是挂钩htmx:sendError事件。

如果您想使用超脚本执行此操作，可以将以下代码添加到您的正文标记（或发出请求的元素的任何封闭元素）：

<body _="on htmx:sendError call alert('A network error occured')">
 ...
</body>

【讨论】：

好的，明白了。我以为我必须将 htmx:sendError 添加到 FORM 中的 _on 中，这让我不知道该怎么做。
可以用js代替超脚本包含一个例子吗？
html <script> body.addEventListener("htmx:sendError", function() { alert("A network error occured"): }); </script>