HX-触发器媒体交换

本文讨论了使用 HX-触发器媒体交换时遇到的问题。尽管响应标头已正确设置，但未触发“get”事件。文章指出，问题可能是由于通过整页提交而不是 AJAX 提交表单造成的。建议添加“hx-boost”以将提交转换为 htmx AJAX 请求，并检查标头是否有效。

我正在尝试根据响应标头触发表的获取

<table class="table">
  <thead>
    <tr>
      <th>tasks</th>
      <th>date</th>
      <th>complete</th>
      <th></th>
    </tr>
  </thead>
  <tbody id="todo-table" hx-get="http://localhost:8081/data" hx-trigger="todoadded from:body">
  </tbody>
</table>

func SubmitTodo(w http.ResponseWriter, r *http.Request) {
    http.Header.Add(w.Header(), "Access-Control-Allow-Methods", "*")
    http.Header.Add(w.Header(), "Access-Control-Allow-Origin", "*")
    http.Header.Add(w.Header(), "Access-Control-Allow-Headers", "*")

    // Stop here if its Preflighted OPTIONS request
    if r.Method == "OPTIONS" {
        return
    }

    // Get the value from the form field
    value := r.FormValue("todo")
    if value == "" {
        return
    }

    todoList = append(todoList, todoTask{Task: value, Done: false, InputtedDate: time.Now()})
    fmt.Println(value)

    w.Header().Set("HX-Trigger", "todoAdded")

    // Respond with an "ok" message and set the HX-Trigger header
    w.WriteHeader(http.StatusOK)
    w.Write([]byte("ok"))
}

我可以看到响应中设置了标头，但没有触发 get 事件。如果我将“todoadded”替换为“load”，则会触发获取请求。

正确答案

我认为您正在做的是提交表单，不是通过 AJAX，而是通过整页提交。我相信 HX-Trigger 标头将不会被执行。尝试将 hx-boost 添加到表单中，以便将提交转换为 htmx AJAX 请求，并查看标头是否有效。

HX-Trigger 响应标头的文档显示：

如果您正在执行普通表单提交，那么您将向页面响应添加标头，而不是向 htmx 响应。

今天带大家了解了的相关知识，希望对你有所帮助；关于Golang的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~