mirror of
https://github.com/labstack/echo.git
synced 2024-12-24 20:14:31 +02:00
Added JSONP recipe
Signed-off-by: Vishal Rana <vr@labstack.com>
This commit is contained in:
Vishal Rana
parent
acf5703b08
commit
c60f207279
3
.gitignore
vendored
3
.gitignore
vendored
@ -1,6 +1,5 @@
|
||||
# Website
|
||||
public
|
||||
.publish
|
||||
website/public
|
||||
|
||||
# Node.js
|
||||
node_modules
|
||||
|
||||
36
recipes/jsonp/public/index.html
Normal file
36
recipes/jsonp/public/index.html
Normal file
@ -0,0 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
<title>JSONP</title>
|
||||
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var host_prefix = 'http://localhost:3999';
|
||||
$(document).ready(function() {
|
||||
// JSONP version - add 'callback=?' to the URL - fetch the JSONP response to the request
|
||||
$("#jsonp-button").click(function(e) {
|
||||
e.preventDefault();
|
||||
// The only difference on the client end is the addition of 'callback=?' to the URL
|
||||
var url = host_prefix + '/jsonp?callback=?';
|
||||
$.getJSON(url, function(jsonp) {
|
||||
console.log(jsonp);
|
||||
$("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" style="margin-top: 50px;">
|
||||
<input type="button" class="btn btn-primary btn-lg" id="jsonp-button" value="Get JSONP response">
|
||||
<p>
|
||||
<pre id="jsonp-response"></pre>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
31
recipes/jsonp/server.go
Normal file
31
recipes/jsonp/server.go
Normal file
@ -0,0 +1,31 @@
|
||||
package main
|
||||
|
||||
import (
|
||||
"math/rand"
|
||||
"net/http"
|
||||
"time"
|
||||
|
||||
"github.com/labstack/echo"
|
||||
)
|
||||
|
||||
func main() {
|
||||
// Setup
|
||||
e := echo.New()
|
||||
e.ServeDir("/", "public")
|
||||
|
||||
e.Get("/jsonp", func(c *echo.Context) error {
|
||||
callback := c.Query("callback")
|
||||
var content struct {
|
||||
Response string `json:"response"`
|
||||
Timestamp time.Time `json:"timestamp"`
|
||||
Random int `json:"random"`
|
||||
}
|
||||
content.Response = "Sent via JSONP"
|
||||
content.Timestamp = time.Now().UTC()
|
||||
content.Random = rand.Intn(1000)
|
||||
return c.JSONP(http.StatusOK, callback, &content)
|
||||
})
|
||||
|
||||
// Start server
|
||||
e.Run(":3999")
|
||||
}
|
||||
95
website/content/recipes/jsonp.md
Normal file
95
website/content/recipes/jsonp.md
Normal file
@ -0,0 +1,95 @@
|
||||
---
|
||||
title: JSONP
|
||||
menu:
|
||||
main:
|
||||
parent: recipes
|
||||
---
|
||||
|
||||
JSONP is a method that allows cross-domain server calls. You can read more about it at the JSON versus JSONP Tutorial.
|
||||
|
||||
## Server
|
||||
|
||||
`server.go`
|
||||
|
||||
```go
|
||||
package main
|
||||
|
||||
import (
|
||||
"math/rand"
|
||||
"net/http"
|
||||
"time"
|
||||
|
||||
"github.com/labstack/echo"
|
||||
)
|
||||
|
||||
func main() {
|
||||
// Setup
|
||||
e := echo.New()
|
||||
e.ServeDir("/", "public")
|
||||
|
||||
e.Get("/jsonp", func(c *echo.Context) error {
|
||||
callback := c.Query("callback")
|
||||
var content struct {
|
||||
Response string `json:"response"`
|
||||
Timestamp time.Time `json:"timestamp"`
|
||||
Random int `json:"random"`
|
||||
}
|
||||
content.Response = "Sent via JSONP"
|
||||
content.Timestamp = time.Now().UTC()
|
||||
content.Random = rand.Intn(1000)
|
||||
return c.JSONP(http.StatusOK, callback, &content)
|
||||
})
|
||||
|
||||
// Start server
|
||||
e.Run(":3999")
|
||||
}
|
||||
```
|
||||
|
||||
## Client
|
||||
|
||||
`index.html`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
|
||||
<title>JSONP</title>
|
||||
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var host_prefix = 'http://localhost:3999';
|
||||
$(document).ready(function() {
|
||||
// JSONP version - add 'callback=?' to the URL - fetch the JSONP response to the request
|
||||
$("#jsonp-button").click(function(e) {
|
||||
e.preventDefault();
|
||||
// The only difference on the client end is the addition of 'callback=?' to the URL
|
||||
var url = host_prefix + '/jsonp?callback=?';
|
||||
$.getJSON(url, function(jsonp) {
|
||||
console.log(jsonp);
|
||||
$("#jsonp-response").html(JSON.stringify(jsonp, null, 2));
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" style="margin-top: 50px;">
|
||||
<input type="button" class="btn btn-primary btn-lg" id="jsonp-button" value="Get JSONP response">
|
||||
<p>
|
||||
<pre id="jsonp-response"></pre>
|
||||
</p>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
## Maintainers
|
||||
|
||||
- [willf](http://github.com/willf)
|
||||
|
||||
## [Source Code](https://github.com/labstack/echo/blob/master/recipes/jsonp)
|
||||
Loading…
Reference in New Issue
Block a user