企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
## JSONP JSONP 是一个能够被跨域访问资源的方法。 #### 服务端 `server.go` ```go package main import ( "math/rand" "net/http" "time" "github.com/labstack/echo" "github.com/labstack/echo/middleware" ) func main() { e := echo.New() e.Use(middleware.Logger()) e.Use(middleware.Recover()) e.Static("/", "public") // JSONP e.GET("/jsonp", func(c echo.Context) error { callback := c.QueryParam("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.Logger.Fatal(e.Start(":1323")) } ``` ### 客户端 `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:1323'; $(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> ```