夏日博客

A-A+

Jquery中利用getJSON读取json数据方法

2016年10月16日 前端设计 暂无评论 阅读 5 views 次

本文章来给大家介绍Jquery中利用getJSON读取json数据方法与我们直接利用原生态的js写一个读取json数据类的方法，有需要了解的朋友可参考。

整个调用过程中，起关键作用的是jsoncallback=?,在客户端调用时需在请求地址中添加参数：jsoncallback=?；同时服务器端则需要把jsoncallback的值作为方法名传回来。

服务端代码如下:

  1. protected void Page_Load(object sender, EventArgs e)   
  2. {   
  3. Response.Write(Request.QueryString["jsoncallback"] + "({name:'test'})");   
  4. }  

html页面调用,代码如下:

  1. <html xmlns="http://www.w3.org/1999/xhtml" >   
  2. <head >   
  3. <script type="text/javascript" src="jquery-1.4.4.js"></script>   
  4. <script type="text/javascript" language="javascript">   
  5. $(document).ready(function() {   
  6. $.getJSON("http://localhost:10272/test.aspx?jsoncallback=?",   
  7. function(data) {   
  8. $("#divHeaderLink").html(data.name);   
  9. });   
  10. });   
  11. </script>   
  12. </head>   
  13. <body>   
  14. <div id="divHeaderLink">   
  15. </div>   
  16. </body>   
  17. </html>  

如果你不想使用jquery我们也可以使用js来实现,代码如下:

  1. var $ = {  
  2. getJSON: function(url, params, callbackFuncName, callback){  
  3. var paramsUrl ="",  
  4. jsonp = this.getQueryString(url)[callbackFuncName];  
  5. for(var key in params){  
  6. paramsUrl+="&"+key+"="+encodeURIComponent(params[key]);  
  7. }  
  8. url+=paramsUrl;  
  9. window[jsonp] = function(data) {  
  10. window[jsonp] = undefined;  
  11. try {  
  12. delete window[jsonp];  
  13. } catch(e) {}  
  14. if (head) {  
  15. head.removeChild(script);  
  16. }  
  17. callback(data);  
  18. };  
  19. var head = document.getElementsByTagName('head')[0];  
  20. var script = document.createElement('script');  
  21. script.charset = "UTF-8";  
  22. script.src = url;  
  23. head.appendChild(script);  
  24. return true;  
  25. },  
  26. getQueryString: function(url) {  
  27. var result = {}, queryString = (url && url.indexOf("?")!=-1 && url.split("?")[1]) || location.search.substring(1),  
  28. re = /([^&=]+)=([^&]*)/g, m;  
  29. while (m = re.exec(queryString)) {  
  30. result[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);  
  31. }  
  32. return result;  
  33. }  
  34. };  

调用方法,代码如下:

  1. var url = "http://xxx.xxx.xxx?callback=jsonp123";  
  2. var params = {  
  3. a:1,  
  4. b:2  
  5. };  
  6. $.getJSON(url, params, "callback", function(data){  
  7. //todo  
  8. });  
标签：

给我留言