Golang如何实现无刷新提交表单数据到控制器

Golang如何实现无刷新提交表单数据到控制器 我能否在不重新加载表单的情况下，将HTML表单数据提交到Beego框架的控制器？

2 回复

AbdurRahmanPartha:

我能否在不重新加载页面的情况下将 HTML 表单数据提交到控制器？

我不了解 Beego。但根据我在表单方面的经验，给出一个通用的回答：

SSR（Go - 服务器端渲染）和 CSR（客户端渲染）各有其优势。但将它们混合使用的 SSG（静态站点生成）可能更有益。这意味着 Go 在构建时从模板渲染 HTML，所有动态内容由 AJAX（JavaScript）提供，以减少页面闪烁和重新加载。

更多关于Golang如何实现无刷新提交表单数据到控制器的实战系列教程也可以访问 https://www.itying.com/category-94-b0.html


在Beego框架中，可以通过AJAX技术实现无刷新提交表单数据。以下是具体实现示例：

1. 前端HTML表单和JavaScript

<form id="myForm">
    <input type="text" name="username" id="username">
    <input type="email" name="email" id="email">
    <button type="button" onclick="submitForm()">提交</button>
</form>

<script>
function submitForm() {
    // 收集表单数据
    const formData = {
        username: document.getElementById('username').value,
        email: document.getElementById('email').value
    };
    
    // 发送AJAX请求
    fetch('/submit', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData)
    })
    .then(response => response.json())
    .then(data => {
        console.log('提交成功:', data);
        // 在这里处理响应，更新页面内容
    })
    .catch(error => {
        console.error('提交失败:', error);
    });
}
</script>

2. Beego控制器处理

package controllers

import (
    "encoding/json"
    "github.com/astaxie/beego"
)

type SubmitController struct {
    beego.Controller
}

// 定义接收数据的结构体
type FormData struct {
    Username string `json:"username"`
    Email    string `json:"email"`
}

// Post方法处理AJAX请求
func (c *SubmitController) Post() {
    var formData FormData
    
    // 解析JSON数据
    if err := json.Unmarshal(c.Ctx.Input.RequestBody, &formData); err != nil {
        c.Data["json"] = map[string]interface{}{
            "success": false,
            "message": "数据解析失败",
        }
        c.ServeJSON()
        return
    }
    
    // 处理业务逻辑
    // ...
    
    // 返回JSON响应
    c.Data["json"] = map[string]interface{}{
        "success": true,
        "message": "提交成功",
        "data":    formData,
    }
    c.ServeJSON()
}

3. 路由配置

在routers/router.go中添加路由：

package routers

import (
    "your-app/controllers"
    "github.com/astaxie/beego"
)

func init() {
    beego.Router("/submit", &controllers.SubmitController{})
}

4. 使用FormData对象的替代方案

如果不想手动构建JSON，可以使用FormData API：

function submitForm() {
    const form = document.getElementById('myForm');
    const formData = new FormData(form);
    
    fetch('/submit', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('提交成功:', data);
    });
}

对应的控制器修改：

func (c *SubmitController) Post() {
    username := c.GetString("username")
    email := c.GetString("email")
    
    // 处理数据...
    
    c.Data["json"] = map[string]interface{}{
        "success": true,
        "message": "提交成功",
    }
    c.ServeJSON()
}

5. 使用XMLHttpRequest的兼容写法

function submitForm() {
    const xhr = new XMLHttpRequest();
    const formData = new FormData(document.getElementById('myForm'));
    
    xhr.open('POST', '/submit', true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            const response = JSON.parse(xhr.responseText);
            console.log('提交成功:', response);
        }
    };
    xhr.send(formData);
}

这种方法通过AJAX异步提交数据，页面不会重新加载，提交后可以在JavaScript回调函数中更新页面内容。

回到顶部