Originally posted on Boatswain Blog.
This is the second post about handling HTTP request in Echo framework and we will continue to work on the example we made previously.
This time we will create a simple HTML form and submit it as a POST request.
Create a POST request endpoint
Checkout this repo and create the api/post_full_name.go to handle the POST request. This new file is almost the same as api/get_full_name.go except the JSON is prettified before returning to the client.
api/post_full_name.go
package api
import (
"bytes"
"encoding/json"
"fmt"
"net/http"
"github.com/labstack/echo"
"gitlab.com/ykyuen/handling-http-request-in-go-echo-example-1/model"
)
func PostFullName(c echo.Context) error {
// Bind the input data to ExampleRequest
exampleRequest := new(model.ExampleRequest)
if err := c.Bind(exampleRequest); err != nil {
return err
}
// Manipulate the input data
greeting := exampleRequest.FirstName + " " + exampleRequest.LastName
// Pretty print the json []byte
var resp bytes.Buffer
var b = []byte(
fmt.Sprintf(`{
"first_name": %q,
"last_name": %q,
"msg": "Hello %s"
}`, exampleRequest.FirstName, exampleRequest.LastName, greeting),
)
err := json.Indent(&resp, b, "", " ")
if err != nil {
return err
}
// Return the json to the client
return c.JSONBlob(
http.StatusOK,
[]byte(
fmt.Sprintf("%s", resp.Bytes()),
),
)
}
Add the new route in main.go.
...
func main() {
// Echo instance
e := echo.New()
// Instantiate a template registry with an array of template set
// Ref: https://gist.github.com/rand99/808e6e9702c00ce64803d94abff65678
templates := make(map[string]*template.Template)
templates["home.html"] = template.Must(template.ParseFiles("view/home.html", "view/base.html"))
templates["about.html"] = template.Must(template.ParseFiles("view/about.html", "view/base.html"))
e.Renderer = &TemplateRegistry{
templates: templates,
}
// Route => handler
e.GET("/", handler.HomeHandler)
e.GET("/about", handler.AboutHandler)
// Route => api
e.GET("/api/get-full-name", api.GetFullName)
e.POST("/api/post-full-name", api.PostFullName)
// Start the Echo server
e.Logger.Fatal(e.Start(":1323"))
}
Test the new endpoint using curl
Run the Echo server as send a POST request using curl.
curl http://localhost:1323/api/post-full-name -H "Content-Type: application/json" -d '{ "first_name": "Kit", "last_name": "Yuen" }'
Here is the example result.
Add an HTML form
The POST request endpoint is ready and now we could add an HTML form and complete the whole setup. Let's add the form in the about page.
view/about.html
{{define "title"}}
Boatswain Blog | {{index . "name"}}
{{end}}
{{define "body"}}
<h1>{{index . "msg"}}</h1>
<h2>This is the about page.</h2>
<!-- HTML form -->
<form id="post-full-name-form">
<input type="text" id="first-name" placeholder="First Name">
<input type="text" id="last-name" placeholder="Last Name">
<button type="button" id="submit-btn">Submit</button>
</form>
<!-- Print the response after the jQuery ajax request -->
<pre id="form-result"></pre>
<script type="text/javascript">
// Send a ajax request when the submit button is clicked
$("#submit-btn").on("click", function(){
var firstName = $("#first-name").val();
var lastName = $("#last-name").val();
$.ajax({
type: "POST",
url: "/api/post-full-name",
data: JSON.stringify({
first_name: firstName,
last_name: lastName
}),
processData: false,
contentType: "application/json",
dataType: "json"
}).done(
function(data){
$("#form-result").text(JSON.stringify(data, null, 2));
}
).fail(
function(data){
$("#form-result").text("POST request failed!");
}
)
});
</script>
{{end}}
As the form submission required jQuery, let's include it in the view/base.html.
view/base.html
{{define "base.html"}}
<!DOCTYPE html>
<html>
<head>
<title>{{template "title" .}}</title>
<!-- jQuery -->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
</head>
<body>
{{template "body" .}}
</body>
</html>
{{end}}
Test the HTML form in the about page
Start the Echo server and browse the about page. Fill in the first and last name and then click the submit button. It should show the response JSON as follow.
The project structure
Here is our new project structure. (The project is renamed to handling-http-request-in-go-echo-example-2, make sure you set the import statement in the Golang source files correctly if you want to change the project name.)
handling-http-request-in-go-echo-example-2/
βββ api/ # folder of api endpoints
β βββ get_full_name.go # api for get full name
β βββ post_full_name.go # api for post full name
βββ handler/ # folder of request handlers
β βββ home_handler.go # handler for home page
β βββ about_handler.go # handler for about page
βββ model/ # folder of custom struct types
β βββ example_request.go # struct type of get_full_name request
β βββ example_response.go # hstruct type of get_full_name response
βββ vendor/ # dependencies managed by dep
β βββ github.com/*
β βββ golang.org/*
βββ view/ # folder of html templates
β βββ base.html # base layout template
β βββ home.html # home page template
β βββ about.html # about page template
βββ Gopkg.lock # dep config file
βββ Gopkg.toml # dep config file
βββ main.go # programme entrypoint
Summary
This is the second episode of Handling HTTP request in Go Echo framework (1) and we have added the following:
- Setup a POST request endpoint in the Echo framework.
- Prettify the JSON byte array
- Add an HTML form and bind it to the new POST request using AJAX in jQuery/javascript.
The complete example could be found on gitlab.com.
Top comments (0)