Golang在按下按鈕時呈現新模板-有解無憂

我有一個按鈕可以將播放器添加到程式中，這是在 HTML 中完成的。我希望這個按鈕在玩家提交時呈現一個新的部分模板。即使代碼達到了這一點，目前也不會發生這種情況。jQuery 作業正常并通過發送正確的資料，代碼只是沒有呈現新模板。任何幫助都會非常感謝。

去代碼：

package main

import (
    "html/template"
    "log"
    "net/http"
    "strings"
)

type playerType struct {
    Fname string
    Lname string
    // Men are true and Women are false
    Gender bool
}

var players []playerType

var templates *template.Template

func handleFilePath() {
    http.Handle("/templates/", http.StripPrefix("/templates/", http.FileServer(http.Dir("templates"))))
    http.Handle("/assets/", http.StripPrefix("/assets/", http.FileServer(http.Dir("assets"))))

    //templates = template.Must(template.ParseFiles("./templates/index.html", "./templates/displayPlayer.html"))

    templates = template.Must(template.New("").ParseGlob("./templates/*.html"))
}

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

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[0])
        if err != nil {
            log.Panicln(err)
            return
        }
    }
}

func addPlayer(Fname string, Lname string, Gender string) bool {

    if Fname == "" || Lname == "" || Gender == "" {
        return false
    }

    var playerToBeAdded playerType

    // Set men to true and women to false
    if strings.ToLower(Gender) == "male" {
        playerToBeAdded = playerType{Fname, Lname, true}
    } else {
        playerToBeAdded = playerType{Fname, Lname, false}
    }

    players = append(players, playerToBeAdded)

    return true
}

func main() {
    handleFilePath()
    http.HandleFunc("/", landingPage)

    log.Println("Listening...")

    http.HandleFunc("/addPlayer", addPlayerHandler)

    err := http.ListenAndServe(":8081", nil)
    if err != nil {
        log.Panicln(err)
    }
}

HMTL 模板：index.html：

{{ define "home" }}
<head xmlns="http://www.w3.org/1999/html">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/assets/home.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Home - Match Maker</title>
</head>

<body>
<script src="/assets/home.js"></script>

<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'" class="addPlayer">Add Player</button>

<button onclick="generateGames()">Generate Games</button>

</br>

{{ template "displayPlayer" .}}

</br>

<!-- The Modal -->
<div id="id01" class="modal">
    <form class="modal-content animate" action="/" method="post">
        <div class="imgcontainer">
            <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
            <img src="/assets/be.png" alt="Avatar" class="avatar">
        </div>

        <div class="container">
            <label for="fname" style="align-content: center"><b>First Name</b></label>
            <input type="text" placeholder="John" name="firstName" required>

            <label for="lname" style="align-content: center"><b>Last Name</b></label>
            <input type="text" placeholder="Smith" name="lastName" required>
        </div>

        <div class="container">
            Select Gender:
            </br>
            <label>
                <input type="radio" name="gender" value="male" required>Male
            </label>
            </br>
            <label>
                <input type="radio" name="gender" value="female">Female
            </label>
        </div>

        <div class="container" style="background-color:#f1f1f1; text-align: center">
            <button type="button" onclick="document.getElementById('id01').style.display='none'" class="modelButtons">
                Cancel
            </button>
            <button id="subbtn" type="submit" class="modelButtons"
                    onclick="submitPlayer(firstName.value, lastName.value, gender.value)">Submit
            </button>
        </div>
    </form>
</div>
<script>
    // Get the modal
    var modal = document.getElementById('id01');

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>
</body>
</html>
{{ end }}

顯示播放器.html：

{{ define "displayPlayer" }}
<html lang="en">
<body>
{{ .Fname }}
</br>
{{ .Lname }}
</br>
{{ .Gender }}
</body>
</html>
{{ end }}

Javascript：

主頁.js：

function submitPlayer(fname, lname, gender) {
    if (fname == "" || lname == "" || gender == "") {
        return;
    }
    $.ajax({
        url: '/addPlayer',
        method: 'post',
        data: {
            fname: fname,
            lname: lname,
            gender: gender,
        },
        success: (d) => {
            console.log("Player Added");
        },
        error: (d) => {
            console.log("An error occurred. Please try again");
        }
    });
}

function generateGames() {
    $.ajax({
        url: '/createGames',
        method: 'post',
        success: (d) => {
            console.log("Generated Games");
        },
        error: (d) => {
            console.log("An error occurred. Please try again");
        }
    });
}

uj5u.com熱心網友回復：

最后將home.js向下移動，以便在 html 內容加載到 DOM 后加載 js。
添加了帶有玩家 ID 的表以添加回傳的資料 addPlayers
移除 submitPlayer
添加onSubmit到表單中，因此我們可以防止頁面重新加載，因為一旦我們提交表單，頁面重新加載會導致丟失回傳的資料addPlayer

索引.html

{{ define "home" }}
<head xmlns="http://www.w3.org/1999/html">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/assets/home.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Home - Match Maker</title>
</head>

<body>

<!-- Button to open the modal login form -->
<button onclick="document.getElementById('id01').style.display='block'" class="addPlayer">Add Player</button>

<button onclick="generateGames()">Generate Games</button>

</br>

{{ template "displayPlayer" .}}

</br>

<!-- The Modal -->
<div id="id01" class="modal">
    <form class="modal-content animate" action="/" method="post" onsubmit="return onSubmit(event);">
        <div class="imgcontainer">
            <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
            <img src="/assets/be.png" alt="Avatar" class="avatar">
        </div>

        <div class="container">
            <label for="fname" style="align-content: center"><b>First Name</b></label>
            <input type="text" placeholder="John" name="firstName" required>

            <label for="lname" style="align-content: center"><b>Last Name</b></label>
            <input type="text" placeholder="Smith" name="lastName" required>
        </div>

        <div class="container">
            Select Gender:
            </br>
            <label>
                <input type="radio" name="gender" value="male" required>Male
            </label>
            </br>
            <label>
                <input type="radio" name="gender" value="female">Female
            </label>
        </div>

        <div class="container" style="background-color:#f1f1f1; text-align: center">
            <button type="button" onclick="document.getElementById('id01').style.display='none'" class="modelButtons">
                Cancel
            </button>
            <button id="subbtn" type="submit" class="modelButtons">Submit
            </button>
        </div>
    </form>
    <div>
      <table id="players"></table>
    </div>
</div>
<script src="/assets/home.js"></script>
<script>
    // Get the modal
    var modal = document.getElementById('id01');

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function (event) {
        if (event.target == modal) {
            modal.style.display = "none";
        }
    }
</script>
</body>
</html>
{{ end }}

將displayPlayer.html更新為表格行格式，以便我們可以將其添加到表格中。

顯示播放器.html

{{ define "displayPlayer" }}
<tr>
  <td>
    {{ .Fname }}
  </td>
  <td>
    {{ .Lname }}
  </td>
  <td>
    {{ .Gender }}
  </td>
{{ end }}

將表單資料發送到addPlayerapi的函式

主頁.js

var players = document.querySelector('#players');

function onSubmit(evt) {
  evt.preventDefault()
  let form = evt.target;
  let formData = new FormData(form);
  let fname = formData.get('firstName');
  let lname = formData.get('lastName');
  let gender = formData.get('gender');
  if (fname != "" || lname != "" || gender != "") {
    $.ajax({
        url: '/addPlayer',
        method: 'post',
      data: formData,
      processData: false,
      contentType: false,
        success: (d) => {
          console.log("Player Added", d);
          players.innerHTML  = d;
          form.reset();
        },
        error: (d) => {
            console.log("An error occurred. Please try again");
        }
    });
  }

  return false;
}

main.go 的變化

Fname := r.FormValue("firstName")
Lname := r.FormValue("lastName")
Gender := r.FormValue("gender")

# return the last element added to slice before it was always returning the first element.
err := templates.ExecuteTemplate(w, "displayPlayer", players[len(players) - 1])

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/358300.html

標籤：html 走模板

上一篇：從exec.Command逐行捕獲stdout并通過管道傳輸到os.Stdout

下一篇：通過使用scanner.Scan()從檔案中讀取資料來同步可組合goroutine的問題