[GO实战]投票系统-实现按钮将前端数据传给后端并接收

一个不甘平凡的普通人，致力于为Golang社区做出贡献，日更算法学习和打卡，期待您的关注和认可，陪您一起学习打卡！！！
专栏：每日算法学习
个人主页：个人主页

问题描述

先看问题描述：以投票系统为例子，我使用gin框架自带的context.html()数据库数据渲染到页面上，然后想给数据添加投票按钮，当用户点击后，将该form内的相关数据传给后端，后端拿到数据进行增删改查然后再渲染到页面上，身为后端选手，前端基本按钮对我来说很难了，在掉入很多坑之后，我终于把相关功能实现了，下面是我的实现过程，希望对您有所帮助！

解决步骤

使用gin框架自带的context.html()数据库数据渲染到页面上，如下图：

前端实现：(这是我最终修改后的代码)，注意td标签是不能获取值的，需要写成tickName那一行，即内嵌一个input来协助数据，这一点卡了我很久！！！

按钮功能实现： 通过js实现的
因为我有很多个表单，所以通过form表单的id来确定用户点击的按钮属于哪一个

<script type="text/javascript">
  function submitForm(formId) {
    // 获取所属表单的数据
    var form = document.getElementById(formId)
    var formData = new FormData(form);
    var xhr = new XMLHttpRequest()
    // console.log(formData)
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 处理响应数据
        alert(xhr.responseText);
      }
    };
    xhr.open('POST', '/submit', true);
    xhr.send(formData);
  }
</script>

后端通过context.PostForm来获取数据，具体实现如下：

func Submit(c *gin.Context) {
	tickName := c.PostForm("tickName")
	fmt.Println(tickName)

	c.JSON(http.StatusOK, gin.H{"message": "success"})
	//err1 := global.DB.Where("tickkind=?", ticketkind).Where("ticketName=?", ticketname).First(&tick).Update("ticket_num", tick.TicketNum+1).Error
	//if err1 != nil {
	//	//添加失败
	//	log.Println("数据添加失败")
	//
	//} else {
	//	log.Println("渲染数据成功")
	//}

}

这里我记录一下我所踩过的坑，希望对你有所帮助！！！码字不易，感谢您的支持和认可！！！