Html 转到不显示结果的嵌入式ajax_Html_Ajax_Go

Html 转到不显示结果的嵌入式ajax

html ajax go

Html 转到不显示结果的嵌入式ajax,html,ajax,go,Html,Ajax,Go,我正在努力解决一个显而易见的问题，但几天后我还是被卡住了。我有下面的密码 package main import ( "fmt" "net/http" "html/template" "database/sql" _"github.com/mattn/go-sqlite3" "encoding/json" ) type Page struct { Name string DBStatus bool } type Searc

我正在努力解决一个显而易见的问题，但几天后我还是被卡住了。我有下面的密码

package main

import (
    "fmt"
    "net/http"
    "html/template"

    "database/sql"
    _"github.com/mattn/go-sqlite3"

    "encoding/json"
)

type Page struct {
    Name string
    DBStatus bool
}

type SearchResult struct {
    Title string
    Author string
    Year string
    ID string
}

func main() {
    db, _ := sql.Open("sqlite3", "dev.db")
    tmpl := template.Must(template.ParseFiles("templates/index.html"))

    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        fmt.Println("Main Page has been called...")
        p := Page{Name: "Gopher"}
        //Accepts value  passed in with "localhost:8080/?name="
        if name := r.FormValue("name"); name != "" {
            p.Name = name
        }
        p.DBStatus = db.Ping() == nil
        if err := tmpl.ExecuteTemplate(w, "index.html", p); err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
        }
        //db.Close()
    })

    http.HandleFunc("/search", func(w http.ResponseWriter, r *http.Request) {
        fmt.Println("Search function has been called...")
        results := []SearchResult {
            SearchResult{"Moby Dick", "Herman Melville", "1851", "222222"},
            SearchResult{"The Adventures of Huckleberry Finn", "Mark Twain", "1884", "444444"},
            SearchResult{"The Catcher in the Rye", "J.D. Salinger", "1951", "666666"},
        }
        fmt.Println("results =", results)

        encoder := json.NewEncoder(w)
        if err := encoder.Encode(results); err != nil {
            http.Error(w, err.Error(), http.StatusInternalServerError)
        }
    })

    fmt.Println(http.ListenAndServe(":8080", nil))
}

我也有这个嵌入Javascript的HTML试图从Go获取信息

<html lang="en-US">
    <head>
        <title>Go Web Development</title>
        <meta charset="utf-8" />
    </head>

    <body>
        <form id="search-form" onsubmit="return false">
            <input name="search" />
            <input type="submit" value="Search" onclick="submitSearch()" />
        </form>

        <table width="100%">
            <thead>
                <tr style="text-align: left">
                    <th width="40%">Title</th>
                    <th width="30%">Author</th>
                    <th width="10%">Year</th>
                    <th width="20%">ID</th>
                </tr>
            </thead>
            <tbody id="search-results">

            </tbody>
        </table>

        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
            console.log("Starting javascript...")
            function submitSearch() {
                console.log("  Starting submitSearch()...")
                $.ajax({
                    url: "/search",
                    method: "POST",
                    data: $("#search.form").serialize(),
                    success: function(rawData) {
                        var parsed = JSON.parse(rawData);
                        console.log(parsed)
                        console.log("Hello")
                        if (!parsed) return;

                        var searchResults = $("#search.results");
                        searchResults.empty();

                        parsed.forEach(function(result) {
                            var row = $("<tr><td>" + result.Title + "</td><td>" + result.Author + "</td><td>" + result.Year + "</td><td>" + result.ID + "</td></tr>");
                            console.log(row)
                            searchResults.append(row);
                            console.log(searchResults)
                        })
                    }
                })
                return false;
            }
        </script>
    </body>
</html>


Go Web开发
标题
作者
年
身份证件
log（“正在启动javascript…”）
函数submitSearch（）{
log（“正在启动submitSearch（）…”）
$.ajax({
url:“/search”，
方法：“张贴”，
数据：$（“#search.form”）.serialize（），
成功：函数（rawData）{
var parsed=JSON.parse（rawData）；
console.log（已解析）
log（“你好”）
如果（！parsed）返回；
var searchResults=$（“#search.results”）；
searchResults.empty（）；
forEach（函数（结果）{
变量行=$（“”+result.Title+“”+result.Author+“”+result.Year+“”+result.ID+“”）；
console.log（行）
searchResults.append（行）；
console.log（搜索结果）
})
}
})
返回false；
}

使用console.log，看起来数据是通过ajax传递给Javascript的，但它没有显示。我一直认为我犯了一个错误，但如果是这样的话，我就找不到了，而且我还不太熟悉如何在Javascript中使用ajax来解决这个问题。任何帮助或建议都将不胜感激。

这里有两个问题。您正在引用：

var searchResults=$（“#search.results”）
但在html中，它是：

您应该使用#搜索结果
。从表格中阅读也有同样的情况：
数据：$（“#search.form”）.serialize（）
有两个问题。您正在引用：
var searchResults=$（“#search.results”）
但在html中，它是：

您应该使用#搜索结果
。从表格中阅读也有同样的情况：
数据：$（“#search.form”）.serialize（）
我对任何事情都不确定，但我相信我是从HTML端获取数据的，因为我可以在console.log（）中看到它。对不起，前面的答案。我发现了真正的问题。不，我不这么认为。不过，对于我的一般启发来说，#在Javascript中有什么特殊用途？另外，我现在对我的Javascript感到困惑，它是数据：$（“#search.form”）.serialize（），
。为什么不是搜索表单？我尝试将其更改为该格式，但结果是相同的。我再次查看了我试图从中复制的代码，它确实有数据：$（“#搜索表单”）.serialize（），
，但它仍然以HTML格式显示结果。我不再确定任何内容，但是我相信我是在HTML端获取数据的，因为我可以在console.log（）中看到它。对于前面的答案，我感到抱歉。我发现了真正的问题。不，我不这么认为。不过，对于我的一般启发来说，#在Javascript中有什么特殊用途？另外，我现在对我的Javascript感到困惑，它是数据：$（“#search.form”）.serialize（），
。为什么不是搜索表单？我尝试将其更改为该格式，但结果是相同的。我再次查看了我试图从中复制的代码，它确实有数据：$（“#搜索表单”）.serialize（），
，但它仍然以HTML显示结果。