gpt4 book ai didi

ajax - 使用模板在 Golang 中创建加载更多按钮

转载 作者:IT王子 更新时间:2023-10-29 02:27:36 26 4
gpt4 key购买 nike

我想创建一个类似 Facebook 的页面,如果用户向下滚动页面,则在不刷新的情况下获取旧帖子。我之前使用 Ajax 并使用 JS 附加 HTML 页面完成了此操作。

但是,由于我现在使用 Go 及其模板来构建页面,所以我不确定如何实现类似的结果。请帮助我提出你的建议。

{{range .posts}}
<<in side the range brackets, I am showing the posts >>
{{end}}
out side range I have created load more button which calls
the js which internally fetch the posts slice.

下面的链接显示了一种解决方案,但它不适用于大量数据,在 js 中创建所有这些按钮将很困难。 Dynamically refresh a part of the template when a variable is updated golang

感谢您的帮助。 :)

最佳答案

您在问题中链接的我的其他答案包含实现“加载更多...” 功能所需的所有细节和技巧:Dynamically refresh a part of the template when a variable is updated golang

是的,这不是微不足道的,但也不是那么难/复杂。该答案讨论了不同的方式/备选方案,但显然解决方案只需要一个。

这里我展示了一个可行的解决方案。 加载更多 按钮不会“记住”最后返回的帖子是什么,它只会检索 2 个新帖子。考虑如何实现发回最后一个 ID,并在请求更多 ID 时发送记录。

可以在 Go Playground 上找到完整的、可运行的应用程序代码。 .当然不能在Go Playground上运行,保存在本地,在电脑上运行。

因此,我们将使用以下 Post实体:

type Post struct {
User, Time, Text string
}

我将使用以下模板:

<html><body><h2>Posts</h2>
{{block "batch" .}}
{{range .posts}}
<div><b>{{.Time}} {{.User}}:</b> {{.Text}}</div>
{{end}}
<div id="nextBatch"></div>
{{end}}
<button onclick="loadMore()">Load more</button>
<script>
function loadMore() {
var e = document.getElementById("nextBatch");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
e.outerHTML = xhr.responseText;
}
}
xhr.open("GET", "/posts/more", true);
try { xhr.send(); } catch (err) { /* handle error */ }
}
</script>
</body></html>

它包含一个 {{block "batch" .}}用于列出帖子的 block ,还为下一批 ( <div id="nextBatch"> ) 呈现一个占位符。接下来它包含一个 Load More 按钮,当按下该按钮时,以呈现的形式获取下一批,并替换占位符。渲染的下一批处理还包含下一批处理的占位符。

我链接的另一个答案中详细介绍了进行 AJAX 调用的 javascript 函数。

执行此模板的处理程序:

var t = template.Must(template.New("").Parse(page))

var lastTime = time.Now()

func produceTime() string {
lastTime = lastTime.Add(time.Second)
return lastTime.Format("15:04:05")
}

func postsHandler(w http.ResponseWriter, r *http.Request) {
// Put up some random data for demonstration:
data := map[string]interface{}{"posts": []Post{
{User: "Bob", Time: produceTime(), Text: "The weather is nice."},
{User: "Alice", Time: produceTime(), Text: "It's raining."},
}}
var err error
switch r.URL.Path {
case "/posts/":
err = t.Execute(w, data)
case "/posts/more":
err = t.ExecuteTemplate(w, "batch", data)
}
if err != nil {
log.Printf("Template execution error: %v", err)
}
}

produceTime()只生成单调递增的时间戳字符串,因此输出看起来很合理。

还有 main()函数注册处理程序并启动服务器:

func main() {
http.HandleFunc("/posts/", postsHandler)
panic(http.ListenAndServe(":8080", nil))
}

仅此而已。这是一个工作应用程序。输入http://localhost:8080/posts/在浏览器中,您会看到:

Posts

09:42:29 Bob: The weather is nice.
09:42:30 Alice: It's raining.
Load more

按下加载更多按钮,浏览器中的内容将动态刷新,无需重新加载页面。新内容:

Posts

09:42:29 Bob: The weather is nice.
09:42:30 Alice: It's raining.
09:42:31 Bob: The weather is nice.
09:42:32 Alice: It's raining.
Load more

再次按下:

Posts

09:42:29 Bob: The weather is nice.
09:42:30 Alice: It's raining.
09:42:31 Bob: The weather is nice.
09:42:32 Alice: It's raining.
09:42:33 Bob: The weather is nice.
09:42:34 Alice: It's raining.
Load more

关于ajax - 使用模板在 Golang 中创建加载更多按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41136000/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com