现在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',将作为url的追加部分 callback=displayResult
呵呵 这样就可以了 够简单吧