Golang点击按钮提交玩家数据后无法渲染partial模板问题求助

问题根源 #

• 提交按钮为submit类型，点击后会触发表单默认提交行为，页面刷新导致AJAX回调逻辑未生效
• AJAX请求成功后仅打印日志，未将服务端返回的渲染后HTML片段插入到页面对应位置
• 初始首页渲染时给模板传参为nil，displayPlayer模板无数据可渲染
• addPlayerHandler渲染模板时固定传入players[0]，永远只会展示第一个添加的玩家
• displayPlayer模板包含完整的<html>``<body>标签，作为片段插入现有页面会导致DOM结构异常

修复方案 #

1. 修改前端HTML结构

给玩家展示区域加唯一ID，方便后续JS插入内容，同时修改提交按钮的点击事件绑定，阻止默认提交：

<!-- index.html 玩家展示部分 -->
<div id="playerList">
{{ template "displayPlayer" .}}
</div>

<!-- index.html 提交按钮部分 -->
<button id="subbtn" type="submit" class="modelButtons"
        onclick="return submitPlayer(firstName.value, lastName.value, gender.value)">Submit
</button>

2. 调整JS逻辑

提交成功后将服务端返回的模板片段插入页面，同时阻止表单默认提交：

// home.js submitPlayer 函数调整
function submitPlayer(fname, lname, gender) {
    if (fname == "" || lname == "" || gender == "") {
        return false;
    }
    $.ajax({
        url: '/addPlayer',
        method: 'post',
        data: {
            fname: fname,
            lname: lname,
            gender: gender,
        },
        success: (d) => {
            console.log("Player Added");
            // 插入服务端返回的渲染后内容
            $('#playerList').html(d);
            // 提交成功关闭弹窗
            document.getElementById('id01').style.display='none';
        },
        error: (d) => {
            console.log("An error occurred. Please try again");
        }
    });
    return false;
}

3. 优化partial模板

displayPlayer.html去掉多余的HTML根标签，调整为纯片段内容，如果你需要展示所有玩家可以加遍历逻辑：

{{ define "displayPlayer" }}
{{ range . }}
<div class="player-card">
  <span>姓名：{{ .Fname }} {{ .Lname }}</span>
  <br>
  <span>性别：{{ if .Gender }}男{{ else }}女{{ end }}</span>
  <hr>
</div>
{{ end }}
{{ end }}

4. 调整Go服务端逻辑

首页渲染传入玩家列表，新增玩家后返回完整的玩家列表渲染结果：

// landingPage 调整传参
func landingPage(w http.ResponseWriter, r *http.Request) {
    err := templates.ExecuteTemplate(w, "home", players)
    if err != nil {
        log.Panicln(err)
        return
    }
}

// addPlayerHandler 调整传入参数为整个玩家列表
func addPlayerHandler(w http.ResponseWriter, r *http.Request) {
    Fname := r.FormValue("fname")
    Lname := r.FormValue("lname")
    Gender := r.FormValue("gender")

    if addPlayer(Fname, Lname, Gender) {
        log.Printf("Player added: %v, %v, %v", Fname, Lname, Gender)
        // 传入整个玩家列表渲染所有玩家
        err := templates.ExecuteTemplate(w, "displayPlayer", players)
        if err != nil {
            log.Panicln(err)
            return
        }
    }
}

内容的提问来源于stack exchange，提问作者user9674611