一个简单的jsonp例子

最新推荐文章于 2025-06-16 15:21:30 发布

dz45693

最新推荐文章于 2025-06-16 15:21:30 发布

阅读量5.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ASP.NET javascript和jQuery 文章标签： jsonp callback function string button

本文链接：https://blog.youkuaiyun.com/ma_jiang/article/details/7473022

ASP.NET 同时被 2 个专栏收录

103 篇文章

订阅专栏

javascript和jQuery

72 篇文章

订阅专栏

现在jsonp很流行看见很多人都写得很复杂，现在给一个简单的调用

首先写一个服务端，创建TestHandler.ashx

  public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "application/x-javascript";
            string callback = context.Request.QueryString["callback"].Trim();
            string name = context.Request.QueryString["name"].Trim();
            string str = callback + "([{\"SuitName\":\"" + name + "\"}]);";
            context.Response.Write(str);
        }

htm的代码：

 <div>
        <input type="button" id="btn1" value="Test Handler" />
        <div id="msg" style="background-color: Red; width: 100px; height: 50px">
        </div>
        <script type="text/javascript">
            function displayResult(data) {
                $("#msg").text(data[0].SuitName);
            }
            $(function () {

                $("#btn1").click(function () {
                    var url = "TestHandler.ashx?name=majiang&callback=displayResult"
                    $.getScript(url);

                });

            });
        </script>
    </div>

在这里通过getScript来做jsonp有一个缺陷是displayResult定义为一个全局的函数，如果你的jquey是1.6以上的版本，也可以用原始的ajax来做，代码如下：

 <div>
        <input type="button" id="btn1" value="Test Handler" />
        <div id="msg" style="background-color: Red; width: 100px; height: 50px">
        </div>
        <script type="text/javascript">
            $(function () {
                $("#btn1").click(function () {
                    $.ajax({
                        cache: true,
                        url: "TestHandler.ashx",
                        dataType: 'JSONP',
                        data: "name=majiang",
                        jsonp: 'callback',
                        jsonpCallback: 'displayResult',
                        success: function (data) {
                            $("#msg").text(data[0].SuitName)
                        }
                    });
                });

            });  
        </script>
    </div>

其中的jsonp: 'callback' , jsonpCallback: 'displayResult',将作为url的追加部分callback=displayResult

呵呵这样就可以了够简单吧