COOKBOOK（手册） - JSONP

优质

小牛编辑

140浏览

2023-12-01

JSONP

JSONP 是一个能够被跨域访问资源的方法。

服务端

server.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

<!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>