将前端数据通过onsubmit提交给后台,并用gin获取,账号成功切换其他界面
时间: 2023-12-09 12:06:26 浏览: 100
onsubmit阻止form表单提交与onclick的相关操作
5星 · 资源好评率100%
好的,这是一个比较常见的前后端交互问题。首先,在前端页面中,需要编写一个表单,并设置其onsubmit属性为一个JavaScript函数,该函数可以获取表单中的数据并将其通过Ajax请求发送给后台。
示例代码如下:
```html
<form id="myForm" onsubmit="submitFormData(); return false;">
<input type="text" name="username" placeholder="用户名">
<input type="password" name="password" placeholder="密码">
<button type="submit">提交</button>
</form>
```
其中,onsubmit属性设置为submitFormData(),并且最后返回false,是为了防止表单自动提交。
接下来,需要编写submitFormData()函数,该函数中使用了jQuery库中的ajax()方法,将表单数据通过POST方式发送给后台。
示例代码如下:
```javascript
function submitFormData() {
var formData = $('#myForm').serialize();
$.ajax({
type: 'POST',
url: '/api/login',
data: formData,
success: function(data) {
console.log(data);
// 登录成功后跳转到其他页面
window.location.href = '/other-page';
},
error: function(xhr, textStatus, errorThrown) {
console.log(xhr.responseText);
}
});
}
```
在后台使用Go语言的Web框架Gin,可以通过c.PostForm()方法获取表单数据。
示例代码如下:
```go
func loginHandler(c *gin.Context) {
username := c.PostForm("username")
password := c.PostForm("password")
// 在这里进行账号验证等操作
// ...
c.JSON(http.StatusOK, gin.H{
"message": "登录成功",
})
}
```
最后,在登录成功后,可以通过window.location.href跳转到其他页面,实现账号切换。
阅读全文