Golang从HTML表单中获取data-key的方法

Golang从HTML表单中获取data-key的方法 我在HTML表单中使用“datalist”进行选择。datalist的一个缺点是，你无法以常规方式存储“键”或“id”。

http://94.237.92.101:5050

  <input list=jobs data-key="" id="job" name="job" placeholder="Search..." onchange="update(this)">
  <datalist id=jobs>
    <option data-id=11 value="11 Web"></option>
    <option data-id=42 value="42 Print"></option>
    <option data-id=43 value="43 Design"></option>
    <option data-id=44 value="44 Consulting"></option>
    <option data-id=45 value="45 Misc"></option>
  </datalist>

用户需要一个“可读的”描述。数据库需要一个“id”。为了存储“id”，我设法使用Javascript将id值以“data”格式存储。

var key = option.dataset.id
field.setAttribute('data-key', key);

目标是获取这个“data-id”或“data-key”并将其传递给数据库。作为HTML表单常规“值”的描述已经存在于数据库中，无需再次存储。我可以使用Javascript获取这个“data-key”。

  var inputs = document.querySelectorAll("input[list]");
  for (var element of inputs) {
    alert(element.dataset.key) 
  }

这段代码只获取“描述”。

func submit(w http.ResponseWriter, r *http.Request) {
	r.ParseForm()
	for key, value := range r.PostForm {
		fmt.Printf("%s =%s\n", key, value)
	}
}

但是我如何使用Go来获取“data-key”呢？


更多关于Golang从HTML表单中获取data-key的方法的实战教程也可以访问 https://www.itying.com/category-94-b0.html

10 回复

lutzhorn:

你指的是 data-id 属性的值吗？

是的。但它存储在顶层的 <input "data-key"> 中。

更多关于Golang从HTML表单中获取data-key的方法的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


隐藏的表单字段不再是数据属性。它是一个表单字段。你不应该信任它的值。同样，你也不应该信任任何在提交前由JS注入的值。

因为这可能会被用户覆盖。

由于您的代码没有包含实际构建和提交HTTP POST请求的部分，因此很难判断 r.ParseForm() 中包含什么内容。

func main() {
    fmt.Println("hello world")
}

您可以在浏览器中运行的JavaScript中读取它们。您无法从nodeJS后端读取它们，就像您无法从Go后端读取它们一样。

不过，您可以在客户端编写JavaScript，在提交时读取这些属性并将其添加到表单数据中。

那些是数据属性，在表单提交时不存在。你无法从请求中解析它们，因为浏览器不会发送它们。

那么我可以用Javascript获取它们，但不能用Golang？

Sibert:

但是我如何使用 Go 获取 “data-key”？

你是指 data-id 属性的值吗？这些是数据属性，在表单提交时并不存在。你无法从请求中解析它们，因为浏览器不会发送这些数据。

NobbZ:

隐藏表单字段不再是数据属性，它是一个表单字段。

是的，我可以接受这一点，但隐藏字段没有被解析。我如何从隐藏输入中获取值？

func submit(w http.ResponseWriter, r *http.Request) {
	r.ParseForm()
	for key, value := range r.PostForm {
		fmt.Printf("%s =%s\n", key, value)
	}
}

NobbZ:

你无法从 Go 后端读取它们

既是也不是。我需要添加一个隐藏字段来存储 ID，然后将其作为“普通值”提交。

HTML input type=“hidden”

W3Schools 为所有主要的 Web 语言提供免费的在线教程、参考和练习。涵盖 HTML、CSS、JavaScript、Python、SQL、Java 等众多热门主题。

如果有一个带有“名称”的隐藏字段，你可以存储ID并提交该ID。

<input type="hidden" id="jobid" name="jobid" value="">

func submit(w http.ResponseWriter, r *http.Request) {
	r.ParseForm()
	for key, value := range r.PostForm {
		fmt.Printf("%s =%s\n", key, value)
	}
}

jobid =[43] codeid =[PM]

或者是否有更巧妙的方法来实现这个功能？

在Go中获取HTML表单的data-key属性，需要通过JavaScript在表单提交前将值存储到隐藏字段中，因为标准表单提交只包含name和value属性。

以下是解决方案：

1. HTML部分 - 添加隐藏字段存储data-key：

<form id="myForm" method="POST">
  <input list="jobs" id="job" name="job" placeholder="Search..." 
         onchange="updateDataKey(this)">
  <input type="hidden" id="job_key" name="job_key">
  
  <datalist id="jobs">
    <option data-id="11" value="11 Web"></option>
    <option data-id="42" value="42 Print"></option>
    <option data-id="43" value="43 Design"></option>
  </datalist>
  
  <button type="submit">提交</button>
</form>

<script>
function updateDataKey(element) {
  const datalist = document.getElementById('jobs');
  const options = datalist.options;
  const inputValue = element.value;
  
  // 查找匹配的option并获取data-id
  for (let option of options) {
    if (option.value === inputValue) {
      document.getElementById('job_key').value = option.dataset.id;
      break;
    }
  }
}
</script>

2. Go后端处理：

func submitHandler(w http.ResponseWriter, r *http.Request) {
    if err := r.ParseForm(); err != nil {
        http.Error(w, "解析表单错误", http.StatusBadRequest)
        return
    }
    
    // 获取可见的表单值（描述）
    jobDescription := r.FormValue("job")
    fmt.Printf("职位描述: %s\n", jobDescription)
    
    // 获取隐藏字段的data-key（ID）
    jobID := r.FormValue("job_key")
    fmt.Printf("职位ID: %s\n", jobID)
    
    // 数据库操作示例
    if jobID != "" {
        id, _ := strconv.Atoi(jobID)
        // 使用id进行数据库操作
        fmt.Printf("转换为整数ID: %d\n", id)
    }
}

3. 替代方案 - 使用JSON提交：

<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    const formData = {
        job: document.getElementById('job').value,
        job_key: document.getElementById('job_key').value
    };
    
    fetch('/submit', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData)
    });
});
</script>

type FormData struct {
    Job     string `json:"job"`
    JobKey  string `json:"job_key"`
}

func jsonSubmitHandler(w http.ResponseWriter, r *http.Request) {
    var data FormData
    if err := json.NewDecoder(r.Body).Decode(&data); err != nil {
        http.Error(w, err.Error(), http.StatusBadRequest)
        return
    }
    
    fmt.Printf("职位: %s, ID: %s\n", data.Job, data.JobKey)
    
    // 处理数据库存储
    if data.JobKey != "" {
        id, _ := strconv.Atoi(data.JobKey)
        // 使用id更新数据库
        _ = id
    }
}

4. 服务器端路由设置：

func main() {
    http.HandleFunc("/submit", submitHandler)
    http.HandleFunc("/submit-json", jsonSubmitHandler)
    http.Handle("/", http.FileServer(http.Dir("./static")))
    
    fmt.Println("服务器启动在 :8080")
    http.ListenAndServe(":8080", nil)
}

关键点：标准HTML表单提交机制只传输name和value属性，data-*属性不会自动提交。必须通过JavaScript将data-key值复制到表单字段中，才能在Go后端通过r.FormValue()获取。

回到顶部