JSONP跨域交互请求JSON数据

 

JSONP跨域交互请求JSON数据

 

 

<% @ WebHandler Language = " C# "  Class = " jsonp "   %>

using  System;
using  System.Web;
using  System.Collections.Generic;
using  System.Text;

public   class  jsonp : IHttpHandler {
    
     public   void  ProcessRequest (HttpContext context) {
        context.Response.ContentType  =   " text/plain " ;
         string  c  =  context.Request.QueryString[ " callback " ];    // 获取url中传进来的callback
         string  param  =  context.Request.QueryString[ " id " ];      // 参数
        
         // 模拟一个json数据，实际中这个数据应该是程序从数据库中取出的。
         string  data  =   " [{\ " LineName\ " :\ " line1\ " ,Vote:128},{\ " LineName\ " :\ " line5\ " ,Vote:58},{\ " LineName\ " :\ " line2\ " ,Vote:28},{\ " LineName\ " :\ " line3\ " ,Vote:12},{\ " LineName\ " :\ " line4\ " ,Vote:18}] " ;
        
         // 为json数据加上callback标头
        data  =  c  +   " ( "   +  data  +   " ); " ;
         // 输出JSON数据返回给调用
        context.Response.Write(data);
    
    }
 
     public   bool  IsReusable {
         get  {
             return   false ;
        }
    }

}

 

》

 

function  SendVote(id) {
     var  votesArray  =  [];         // 初始化投票结果数组
     var  nameArray  =  [];          // 初始化线路名称数组
     var  percentageArray  =  [];    // 初始化线路投票占总票数的百分比
     var  sumVotes  =   0 ;            // 初始化总票数

     // url为请求json数据的目标地址，下面的地址为我的本机测试地址，请根据需要修改
     var  url  =   " http://localhost:5573/TravelVoteUI/jsonp.ashx?id= "   +  id  +   " &callback=? " ;


    $.getJSON(url,  function (data) {
        $.each(data,  function (i) {
            votesArray.push(data[i].votes);
            nameArray.push(data[i].name);
            sumVotes  +=  data[i].votes;
        });

         var  maxVotes  =  votesArray.max();
         for  ( var  i  =   0 ; i  <  votesArray.length; i ++ ) {
            percentageArray.push(votesArray[i]  /  sumVotes);
        }
        
         var  htmlstr  =   "" ;
         for  ( var  i  =   0 ; i  <  percentageArray.length; i ++ ) {
             var  n  =  roundNum(percentageArray[i]);
             var  p  =  exchange(n);
             var  id  =  i  +   1 ;
            htmlstr  +=   ' <div class="chartsItem"><div class="lineName"> '   +  nameArray[i]  +   ' </div><div id="charts '   +  id  +   ' " class="charts charts '   +  id  +   ' "> '   +  p  +   ' </div><span class="votesNumber" id="votes '   +  id  +   ' "> '   +  votesArray[i]  +   ' 票</span><div class="ietmBottom" ></div></div> ' ;
        }

         // 在页面中有一个div 的 id为 charts的
        $( " #charts " ).append(htmlstr);
    });
}

 

 

》

 

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 > getJson </ title >
     < script  src ="js/jquery.js"  type ="text/javascript" ></ script >
     < script  src ="js/votes.js"  type ="text/javascript" ></ script >
    
</ head >
< body >
     < div  id ="charts" >
    
     </ div >

     < br  />
     < hr  />
     < br  />

     < ul >
         < li >
             < img  src ="http://www.visitbeijing.com.cn/images/content/2008/20081105110304499350.jpg"  width ="44"  height ="30"  alt ="Great Wall"   />
             < br  /> 如果对本景点满意，请投票。【01】
             < input  type ="button"  id ="1"  onclick ="SendVote(1)"  value ="vote"   />
         </ li >
         < li >
             < img  src ="http://www.visitbeijing.com.cn/images/aoylyjpxl/images_03.jpg"  width ="44"  height ="30"  alt ="Great Wall"   />
             < br  /> 如果对本景点满意，请投票。【02】
             < input  type ="button"  id ="Button2"  onclick ="SendVote(2)"  value ="vote"   />
         </ li >
         < li >
             < img  src ="http://www.visitbeijing.com.cn/images/content/2008/20080713162912097791.jpg"   width ="44"  height ="30"  alt ="Great Wall"   />
             < br  /> 如果对本景点满意，请投票。【03】
             < input  type ="button"  id ="Button3"  onclick ="SendVote(3)"  value ="vote"   />
         </ li >
         < li >
             < img  src ="http://www.visitbeijing.com.cn/images/content/2008/20080713162912847837.jpg"  width ="44"  height ="30"  alt ="Great Wall"   />
             < br  /> 如果对本景点满意，请投票。【04】
             < input  type ="button"  id ="Button4"  onclick ="SendVote(4)"  value ="vote"   />
         </ li >
         < li >
             < img  src ="http://www.visitbeijing.com.cn/images/content/2008/20080713162912769648.jpg"   width ="44"  height ="30"  alt ="Great Wall"   />
             < br  /> 如果对本景请投票。【05】
             < input  type ="button"  id ="Button5"  onclick ="SendVote(5)"  value ="vote"   />
         </ li >
         < li >
             < img  src ="http://home.cnblogs.com/pic/avatar/a33655.jpg"  width ="44"  height ="30"   alt ="Great Wall"   />
             < br  /> 如果对本景点满意，请投票。【06】
             < input  type ="button"  id ="Button1"  onclick ="SendVote(6)"  value ="vote"   />
         </ li >
         < li >
             < img  src ="http://english.cri.cn/mmsource/images/2010/02/08/16670208tibet.jpg"  width ="44"  height ="30"  alt ="Great Wall"   />
             < br  /> 如果对本景点满意，请投票。【07】
             < input  type ="button"  id ="Button6"  onclick ="SendVote(7)"  value ="vote"   />
         </ li >
         < li >
             < img  src ="http://english.cri.cn/mmsource/images/2010/02/09/16670209rmb1.jpg"  width ="44"  height ="30"  alt ="Great Wall"   />
             < br  /> 如果对本景点满意，请投票。【08】
             < input  type ="button"  id ="Button7"  onclick ="SendVote(8)"  value ="vote"   />
         </ li >
         < li >
             < img  src ="http://english.cri.cn/mmsource/images/2010/02/25/4316toyota.jpg"  width ="44"  height ="30"  alt ="Great Wall"   />
             < br  /> 如果对本景点满意，请投票。【09】
             < input  type ="button"  id ="Button8"  onclick ="SendVote(9)"  value ="vote"   />
         </ li >
         < li >
             < img  src ="http://img.wanlibo.com/images_cn/newDocin/doc_logo.gif?rand=1228"  width ="44"  height ="30"  alt ="Great Wall"   />
             < br  /> 如果对本景点票。【10】
             < input  type ="button"  id ="Button9"  onclick ="SendVote(10)"  value ="vote"   />
         </ li >
     </ ul >

  
</ body >
</ html >

 

 

》

jquery可以使用$.getJSON() 来进行跨域.

 

》
泛型集合转json

泛型集合转json

     /*  泛型集合转json
     * 需要引入以下两个命名空间
     * using System.Reflection;
     * using System.Text;
      */
     public   static   string  ObjectToJson < T > ( string  jsonName, IList < T >  IL)
    {
        StringBuilder Json  =   new  StringBuilder();
        Json.Append( " {\ ""  + jsonName +  " \ " :[ " );
         if  (IL.Count  >   0 )
        {
             for  ( int  i  =   0 ; i  <  IL.Count; i ++ )
            {
                T obj  =  Activator.CreateInstance < T > ();
                Type type  =  obj.GetType();
                PropertyInfo[] pis  =  type.GetProperties();
                Json.Append( " { " );
                 for  ( int  j  =   0 ; j  <  pis.Length; j ++ )
                {
                    Json.Append( " \ ""  + pis[j].Name.ToString() +  " \ " :\ ""  + pis[j].GetValue(IL[i], null) +  " \ "" );
                     if  (j  <  pis.Length  -   1 )
                    {
                        Json.Append( " , " );
                    }
                }
                Json.Append( " } " );
                 if  (i  <  IL.Count  -   1 )
                {
                    Json.Append( " , " );
                }
            }
        }
        Json.Append( " ]} " );
         return  Json.ToString();
    }