苏飞论坛

标题: JS|Jquery访问jsonp数据并解析 [打印本页]

作者: 站长苏飞 时间: 2013-1-7 15:49
标题: JS|Jquery访问jsonp数据并解析
我同事一起能的个小例子大家看看吧
有好的建议给提提
[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>

      /*
   Jsion格式如下
   ShowDiv([
   {"Guid":"81c43947-fdd8-4c6d-859b-00182e0fe4ed","ParentGuid":"d7b816cb-b021-48a3-b374-22e483a569fa","Period":8,"TimeUnit":0,"Cost":960.0000,"FirstBuy":960.0000,"Renew":960.0000},
   {"Guid":"6328fabe-0572-47d9-bbaf-00754e266480","ParentGuid":"d6c3854e-eafe-4af1-b527-00d37470771e","Period":7,"TimeUnit":0,"Cost":840.0000,"FirstBuy":840.0000,"Renew":840.0000},
   {"Guid":"cc05275f-b1cd-4766-9433-00a161c0eb8d","ParentGuid":"6d45b3f4-fea0-4454-8fad-370805b60e99","Period":5,"TimeUnit":0,"Cost":39995.0000,"FirstBuy":39995.0000,"Renew":39995.0000}
   ])

      */
      $(document).ready(function () {
         $("#Button1").click(function () {
            FillUrls();
         });
      });

      //加载列表
      function FillUrls() {
         $.ajax({
            async: false,
            url: "JsonTest.ashx",
            type: "GET",
            dataType: 'jsonp',
            timeout: 5000,
            success: function (json) {

            }
         });
      }
      function ShowDiv(strurls) {
         var $ul = $("<ul></ul>");
         $.each(strurls, function (i, v) {
            $("<li/>").text(v["Guid"] + " " + v["Cost"]).appendTo($ul)
         });
         //循环方式
         $("body").append($ul);
         //单独取
         $("body").append(strurls[0]["Guid"]);

      }
</script>
</head>
<body>
<input id="Button1" type="button" value="button" />
</body>
</html>
[/code]

作者: 站长苏飞 时间: 2013-1-7 16:01
jsonp的实现原理
[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
   <title>jsonp测试例子</title>
   <script type="text/javascript" src="http://www.yzswyl.cn/js/jquery.min.js"></script>
   <script type="text/javascript">
   function CallJSONPServer(url){                               // 调用JSONP服务器，url为请求服务器地址
      var oldScript =document.getElementById(url);    // 如果页面中注册了调用的服务器，则重新调用
      if(oldScript){
      oldScript.setAttribute("src",url);
      return;
      }
      var script =document.createElement("script");    // 如果未注册该服务器，则注册并请求之
      script.setAttribute("type", "text/javascript");
      script.setAttribute("src",url);
      script.setAttribute("id", url);
      document.body.appendChild(script);
}

function OnJSONPServerResponse(data){
      var $ul = $("<ul></ul>");
      $.each(data,function(i,v){
         $("<li/>").text(v["id"] + " " + v["name"]).appendTo($ul)
      });
      $("#remote").append($ul);
}
   </script>
   </head>
  <body>
  <input type="button" value="点击获取远程数据" onclick="CallJSONPServer('http://www.yzswyl.cn/demos/jsonp_original.php')" />
  <div id="remote"></div>
  </body>
</html>[/code]

作者: Koson 时间: 2013-1-8 10:13
老大，这是为了便于跨域访问？

作者: 站长苏飞 时间: 2013-1-8 10:29

Koson 发表于 2013-1-8 10:13
老大，这是为了便于跨域访问？

还算不上，这个算是吧http://www.sufeinet.com/thread-375-1-1.html

欢迎光临苏飞论坛 (http://www.sufeinet.com/)