前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载hx-put是 htmx 提供的 HTTP 动词属性之一它让任意 HTML 元素在触发事件时向指定 URL 发起PUT请求并把服务器返回的 HTML 按照交换策略swap strategy替换到目标元素的innerHTML中。本文将以 hx-put 官方文档 为主体骨架结合 htmx 源码 与 hx-put 测试用例 展开讲解读完本文你将掌握hx-put的基础用法、它与hx-target/hx-swap/hx-trigger等属性的协作方式、PUT 请求的参数提交与编码规则以及它在源码中的底层实现链路。hx-put 是什么hx-put属性会让元素向指定的 URL 发起一个PUT请求并将响应返回的 HTML 使用交换策略交换进 DOM。它是 htmx 五大动词属性hx-get、hx-post、hx-put、hx-delete、hx-patch之一适合表达更新某个资源的语义化操作。最小的完整示例button hx-put/account hx-targetbody Put Money In Your Account /button这个示例中button被点击后会向/account发起PUT请求服务器返回的 HTML 会被交换到body的innerHTML中。hx-put属性在 htmx 中也支持data-*前缀写法即data-hx-put/account二者效果完全一致。这一点在 hx-put 测试用例 中有明确的验证。基础用法声明目标 URL 与交换目标hx-put的值就是要请求的 URL 路径。它自身只负责两件事发起PUT请求、把响应 HTML 按默认策略交换。交换的目标和具体策略由配套属性控制hx-target控制响应 HTML 交换到哪个元素默认是触发请求的元素自身hx-swap控制交换策略如innerHTML、outerHTML、beforeend、afterbegin等默认是innerHTMLhx-trigger控制什么事件触发该请求默认是click或表单的submit。组合使用的示例!-- 点击按钮PUT 到 /api/account将响应内容插入到 #details 的末尾 -- button hx-put/api/account hx-target#details hx-swapbeforeend Add Account Detail /button !-- 双击触发请求返回的 HTML 替换整个卡片 -- div hx-put/api/card hx-triggerdblclick hx-swapouterHTML 双击我更新卡片内容 /divhx-put在默认触发条件下点击/表单提交会取消触发事件的默认行为如链接跳转、表单原生提交由 htmx 接管请求与交换这一点从 shouldCancel 的实现 可以印证对于点击事件htmx 会取消button/input typesubmit触发的原生提交行为。源码视角hx-put 是如何被处理的动词注册与属性解析在 htmx 源码 中所有动词属性被集中定义const VERBS [get, post, put, delete, patch] const VERB_SELECTOR VERBS.map(function(verb) { return [hx- verb ], [data-hx- verb ] })可见hx-put与data-hx-put均被纳入统一选择器htmx 初始化时据此扫描文档并绑定处理逻辑。processVerbs绑定触发器并派发请求元素被扫描后processVerbs 会为hx-put属性做三件事把hx-put的 URL 存入元素内部数据的nodeData.path把请求动词存入nodeData.verb此处即为put为每个触发器规格triggerSpec注册事件监听事件发生时调用issueAjaxRequest(put, path, elt, evt)。forEach(VERBS, function(verb) { if (hasAttribute(elt, hx- verb)) { const path getAttributeValue(elt, hx- verb) explicitAction true nodeData.path path nodeData.verb verb // ... 为每个 triggerSpec 添加处理函数调用 issueAjaxRequest(verb, path, elt, evt) } })issueAjaxRequestPUT 请求的完整生命周期请求最终汇聚到 issueAjaxRequest其流程包括目标解析与校验 →htmx:confirm确认事件 →hx-sync同步策略 →hx-prompt/hx-confirm对话框 → 组装请求头与参数 → 派发htmx:configRequest→ 打开 XHR 发送。对 PUT 而言有两个值得注意的实现细节Content-Type 自动设置src/htmx.js#L4484-L4486if (verb ! get !usesFormData(elt)) { headers[Content-Type] application/x-www-form-urlencoded }即默认情况下PUT 请求体按application/x-www-form-urlencoded编码提交若通过 hx-encoding 设置为multipart/form-data则改用FormData提交文件上传场景必需。请求体而非 URL 携带参数src/htmx.js#L4520let useUrlParams htmx.config.methodsThatUseUrlParams.indexOf(verb) 0methodsThatUseUrlParams默认只包含[get, delete]见 docs.md 配置说明因此 PUT 请求的参数默认放进请求体而不是拼进 URL。HTTP 方法大写化src/htmx.js#L4590最终通过xhr.open(verb.toUpperCase(), finalPath, true)发送即实际的 HTTP 方法是PUT并且默认把响应按text/htmlxhr.overrideMimeType(text/html)处理以支持 HTML 交换。测试验证hx-put 测试用例 用两种写法验证了该属性的行为it(issues a PUT request, function() { this.server.respondWith(PUT, /test, function(xhr) { xhr.respond(200, {}, Putted!) }) var btn make(button hx-put/testClick Me!/button) btn.click() this.server.respond() btn.innerHTML.should.equal(Putted!) })测试表明点击带有hx-put/test的按钮会发出PUT请求响应文本Putted!会被交换进按钮自身的innerHTMLdata-hx-put前缀写法同样通过测试。控制 PUT 请求携带的数据hx-put默认会携带哪些数据根据 Parameters 文档规则如下触发请求的元素若带有name且本身有值会包含该值若元素是表单会包含表单内所有输入控件的值对非GET请求PUT 即属于此类会额外包含关联表单中所有输入的值——通常指最近的包裹表单但也可以是formassociated-form指定的表单输入控件的name属性作为请求参数名。例如form idaccount-form input nameusername valuealice input namerole valueadmin /form !-- 点击后 PUT 到 /api/account请求体包含 username 与 role -- button hx-put/api/account hx-include#account-form Update Account /button更精细的数据控制手段还包括hx-include用 CSS 选择器把其他元素的值也纳入请求hx-params过滤掉不需要的参数如hx-paramsnot rolehx-vals / hx-vars以 JSON 键值对或动态表达式追加额外参数htmx:configRequest事件在请求发出前以编程方式修改evt.detail.parameters见 docs.md 相关示例。文件上传场景下PUT 请求同样适用 hx-encodingmultipart/form-data 与FormData提交并可监听htmx:xhr:progress事件展示上传进度见 docs.md 文件上传小节。与 PUT 语义相关的注意事项hx-put不被继承与其他动词属性不同htmx 的动词属性是显式声明的不会从父元素继承与之相对hx-target等属性支持继承。子元素需要发起 PUT 请求时必须自行声明hx-put。PUT 与幂等性HTTP 语义上 PUT 用于整体替换/更新资源应当可重复执行而不产生副作用。在编写服务器端处理逻辑时应让PUT /account这类接口具备幂等性避免重复点击造成重复扣款、重复写入等业务问题。参数位置如前所述PUT 参数默认在请求体application/x-www-form-urlencoded这与 GET 参数拼接 URL 的行为不同若你的后端按查询字符串解析参数需要注意调整。配合确认对话框对 PUT 这类修改型操作常可配合 hx-confirm 做二次确认例如button hx-put/account hx-confirm确认更新账户信息 Update My Account /button总结hx-put用一行 HTML 属性把发起 PUT 请求 交换响应 HTML这一组合行为声明化无需编写任何 JavaScript。理解其背后 VERBS 动词注册、processVerbs 绑定 与 issueAjaxRequest 请求管线 的实现有助于你在排查请求头、参数编码与交换行为时快速定位问题。搭配 hx-target、hx-swap、hx-trigger 以及 Parameters 文档 所介绍的数据控制属性你可以把资源更新类交互完整地构建在纯 HTML 之上。赞分享前端【免费下载链接】htmxhtmx - high power tools for HTML项目地址https://gitcode.com/GitHub_Trending/ht/htmx点击查看免费下载相关推荐htmx hx-post 属性完全指南让任意元素发起 POST 请求并交换响应 HTMLhtmx hx post 属性完全指南让任意元素发起 POST 请求并交换响应 HTML hx post 是 htmx 中最常用的请求属性之一它让任意 HT前端htmx hx-delete 属性完全指南发送 DELETE 请求并交换响应内容htmx hx delete 属性完全指南发送 DELETE 请求并交换响应内容 hx delete 是 htmx 中用于发出 HTTP DELETE 请求的前端htmx 的 hx-patch 属性向服务器发起 PATCH 请求并替换 DOM 的完整实战指南htmx 的 hx patch 属性向服务器发起 PATCH 请求并替换 DOM 的完整实战指南 hx patch 是 htmx 中用于让任意 HTML 元素前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考