Jquery中利用getJSON读取json数据方法
整个调用过程中,起关键作用的是jsoncallback=?,在客户端调用时需在请求地址中添加参数:jsoncallback=?;同时服务器端则需要把jsoncallback的值作为方法名传回来。
服务端代码:
代码如下 | 复制代码 |
|
html页面调用:
代码如下 | 复制代码 |
<html xmlns="http://www.w3.org/1999/xhtml" > <head > <script type="text/javascript" src="jquery-1.4.4.js"></script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $.getJSON("http://localhost:10272/test.aspx?jsoncallback=?", function(data) { $("#divHeaderLink").html(data.name); }); }); </script> </head> <body> <div id="divHeaderLink"> </div> </body> </html> |
如果你不想使用jquery我们也可以使用js来实现
代码如下 | 复制代码 |
var $ = { getJSON: function(url, params, callbackFuncName, callback){ var paramsUrl ="", jsonp = this.getQueryString(url)[callbackFuncName]; for(var key in params){ paramsUrl+="&"+key+"="+encodeURIComponent(params[key]); } url+=paramsUrl; window[jsonp] = function(data) { window[jsonp] = undefined; try { delete window[jsonp]; } catch(e) {} if (head) { head.removeChild(script); } callback(data); }; var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.charset = "UTF-8"; script.src = url; head.appendChild(script); return true; }, getQueryString: function(url) { var result = {}, queryString = (url && url.indexOf("?")!=-1 && url.split("?")[1]) || location.search.substring(1), re = /([^&=]+)=([^&]*)/g, m; while (m = re.exec(queryString)) { result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]); } return result; } }; |
调用方法
代码如下 | 复制代码 |
var url = "http://xxx.xxx.xxx?callback=jsonp123"; var params = { a:1, b:2 }; $.getJSON(url, params, "callback", function(data){ //todo }); |
补充:网页制作,js教程