INDEX-HTML

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();
    }

 

 

posted @ 2010-03-03 14:58  sudo!!  阅读(2871)  评论(0)  编辑  收藏  举报