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