微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

处理 htmxjs 中的连接错误

如何解决处理 htmxjs 中的连接错误

凭借 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:sendError 事件。

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。