0

I am just starting with learning web development, Go, and Ajax but I am having trouble seeing what is going wrong. I am trying to simply send data back and forth between the client and the server. With the Ajax request, I am sending data from the form to the server but it does not seem to reach the server because the log doesn't print "in posthandler" which leads me to think something is wrong with the ajax request. Attached is the main.go, index.html, and js/getData.js with all the relevant code.

main.go

package main

import (
    "fmt"
    "net/http"
    "io/ioutil"
    "log"
)

var INDEX_HTML []byte

func main(){
    fmt.Println("starting server on http://localhost:8888/\nvalue is %s", value)
    http.HandleFunc("/", IndexHandler)
    http.HandleFunc("/post", PostHandler)
    http.ListenAndServe(":8888", nil)
}

func IndexHandler(w http.ResponseWriter, r *http.Request){
    log.Println("GET /")
    w.Write(INDEX_HTML)
}

func PostHandler(w http.ResponseWriter, r *http.Request){
    r.ParseForm()
    log.Println("in posthandler", r.Form)
    var value = r.FormValue("textfield")
    w.Write([]byte(value))
}
func init(){
    INDEX_HTML, _ = ioutil.ReadFile("./html/index.html")
}

index.html

<!doctype html>
<html>
  <head>
    <title>Page Title</title>
  <script src="js/getData.js"></script>
  </head>
  <body>
    <form action="/post" method="post">
      <textarea type="text" name="input" id="textfield"></textarea>
      <br />
      <input type="submit" name="button" id="button" value="Send" onclick="loadXMLDoc()"/>
    </form>
    <div id="fromserver">
    </div>
  </body>
</html>

js/getData.js

function loadXMLDoc() {
    var xmlhttp;
    xmlhttp=new XMLHttpRequest();
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("fromserver").innerHTML=xmlhttp.responseText;
    }
    }
    xmlhttp.open("POST","post",true);
    xmlhttp.send();
}
irregular
  • 1,437
  • 3
  • 20
  • 39

1 Answers1

-1

There are two things:

  • No handler present to render assest (in this case js/.)
  • Form by itself get submitted due to "submit" HTML element.

here is your updated code

main.go

package main

import (
    "fmt"
    "io/ioutil"
    "log"
    "net/http"
)

var INDEX_HTML []byte

func main() {
    fmt.Println("starting server on http://localhost:8888/\nvalue is %s", "asdf")
    http.HandleFunc("/", IndexHandler)
    http.HandleFunc("/post", PostHandler)
    serveSingle("/js/getData.js", "./js/getData.js")
    http.ListenAndServe(":8888", nil)
}

func serveSingle(pattern string, filename string) {
    http.HandleFunc(pattern, func(w http.ResponseWriter, r *http.Request) {
        http.ServeFile(w, r, filename)
    })
}

func IndexHandler(w http.ResponseWriter, r *http.Request) {
    log.Println("GET /")
    w.Write(INDEX_HTML)
}

func PostHandler(w http.ResponseWriter, r *http.Request) {
    r.ParseForm()
    log.Println("in posthandler", r.Form)
    var value = r.FormValue("textfield")
    w.Write([]byte(value))
}
func init() {
    INDEX_HTML, _ = ioutil.ReadFile("./html/index.html")
}

index.html

<!doctype html>
<html>
  <head>
    <title>Page Title</title>
  <script src="js/getData.js"></script>
  </head>
  <body>
    <form action="/post" method="post">
      <textarea type="text" name="input" id="textfield"></textarea>
      <br />
      <input type="button" name="button" id="button" value="Send" onclick="loadXMLDoc()"/>
    </form>
    <div id="fromserver">
    </div>
  </body>
</html>
Kishore
  • 9,146
  • 3
  • 13
  • 11
  • The js function does send to the posthandler now and now the url changes to localhost:8888/post but the page is blank. How can I get the client to say on the same page with only the div id="fromserver" changing with the data from the ajax call? Also if I were to use jquery which has a lot of files would I need to use the singleServe() for every file? – irregular Jan 25 '15 at 19:25
  • 1
    For jquery You could add an hadler which serves all the files in given dir, something like `http.Handle("/jquery", http.FileServer(http.Dir("/path/to/jquery")))` – ain Jan 25 '15 at 21:47
  • @user2807904, based on your initial question, I assumed you needed to make it work and understand yourself what is wrong. Anyway read this [link](http://stackoverflow.com/a/14086560/2171928) to understand how you can render static assets. – Kishore Jan 25 '15 at 23:36