问题描述
先看问题描述：以投票系统为例子，我使用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("渲染数据成功") //} }
